De zéro à héros de conception Web : vaincre Figma et créer des sites Web attrayants en 2024

1. Introduction au cours: Bonjour, bienvenue dans mon bootcamp de conception Figma et UI UX. La seule classe dont vous avez besoin pour créer conception de sites Web ou d'applications. m'appelle Peter et je suis très heureuse d'avoir eu le privilège d'être votre instructeur dans le cadre de ce cours. Au cours des dernières années, des milliers de personnes ont appris à coder et à se mettre à niveau. Ce cours couvre tous les concepts et sujets que vous devez apprendre et maîtriser à propos de Figma et de la conception de sites Web. Nous commençons par les bases de Figma, comme la barre d'outils, couches, les panneaux, le système de grilles, la théorie des couleurs , la typographie, la manipulation d'images, wireframes, d'animations et de prototypage, et bien plus encore. Nous allons également créer un projet concret. Vous pouvez maintenant ajouter votre portefeuille. Ce cours est destiné à tous ceux qui souhaitent en savoir plus sur Figma en tant que concepteur d'interface utilisateur, ou à toute personne souhaitant simplement avoir une compréhension générale de la conception de sites Web ou d'applications, indépendamment de leur expérience antérieure. C'est un guichet unique. C'est le seul cours dont vous aurez besoin pour en savoir plus sur Figma. À la fin de ce cours, vous pouvez vous attendre à concevoir non seulement des applications mobiles ou des sites Web, mais également à créer des vignettes ou du contenu infographique pour les comptes de réseaux sociaux. Merci de nous avoir contactés. Je suis sûr que vous allez adorer ce cours. 2. (1) Introduction à Figma: Salut tout le monde. Bienvenue à la toute première conférence de notre cours Figma. Je vais vous présenter à tous le thème Figma. Et nous apprendrons également la différence entre notre interface utilisateur et notre expérience utilisateur. Alors, sans plus tarder, commençons par la conférence d' aujourd'hui. Alors, qu'est-ce que Sigma ? Figma est donc en fait un outil de conception collaborative en temps réel basé sur le cloud. Eh bien, le cloud n'est qu'un espace virtuel sur Internet. Il agit comme un serveur. Vous devez tous avoir utilisé des applications basées sur le cloud comme votre Google Drive, etc. Le cloud n'est donc qu' un serveur virtuel présent sur Internet. Ce Figma vous permet de collaborer avec d'autres personnes en temps réel pendant que vous créez votre design. Alors ne vous y trompez pas dès le premier coup, d'accord, vous apprendrez tout étape par étape. Alors ne vous inquiétez pas, suivez simplement le cours. Et si vous avez des questions, vous pouvez toujours les commenter ci-dessous. Très bien, quelles sont les fonctionnalités de Figma ? Figma nous fournit donc essentiellement des outils de conception. Nous pouvons concevoir votre projet mobile. Supposons que vous essayez de créer une application Android. Donc, avant de commencer à coder une application ou un site Web que vous essayez de développer. Il possède toujours un front-end et un back-end. front-end signifie essentiellement que vous essayez de mettre accent sur la partie interaction, ce que l'utilisateur verra, ce que les clients, vos utilisateurs ou les clients, nous verrons ce qui s'affichera sur leur écran. C'est la partie avant. En gros, comme vos articles, vos boutons, votre texte, vos images , vos graphismes, votre typographie, tout cela est inclus dans la partie frontale. Donc, si vous êtes familiarisés avec le développement Web, vous devez tous savoir qu' il existe un front-end et un backend. front-end signifie essentiellement que vous vous Le front-end signifie essentiellement que vous vous occupez réellement des éléments de conception, comme vos vignettes, vos icônes, vos boutons, votre topographie, vos graphismes, etc. Voilà donc la partie avant. C'est la partie que les utilisateurs et vos clients verront. Ainsi, toute application, tout site Web possède un front-end et un backend. Le back-end s'occupe de la partie serveur. Que se passe-t-il lorsque l'utilisateur clique sur un bouton spécifique ? Quelle est la fonction dont il a besoin pour fonctionner ? Quelles sont les fonctionnalités ou les éléments qu'elle doit afficher, comment elle s'affichera, et tout cela dépend de la partie principale. Tout le front-end et le backend doivent donc être codés. Maintenant, vous pouvez utiliser n'importe laquelle des langues, accord, il y a tellement de langues différentes , par exemple, pour votre développement Web, vous avez votre HTML, votre CSS. Il existe certains frameworks pour le CSS, comme votre tailwind, CSS Bootstrap et tout ça. Vous n'avez donc pas à vous en préoccuper, car cette classe ne se concentre pas sur tous ces différents composants ou frontend, nous mettons simplement l'accent sur la partie conception. Donc, avant même d'essayer de coder le code frontal, avant même d'avoir essayé de développer la partie frontale. Évidemment, que ce soit en front-end ou en back-end, tout doit être codé. Donc, avant de passer à la partie codage, nous voulons réellement former une mise en page. Nous voulons établir un plan sur la base duquel nous pouvons développer notre front-end. C'est donc la raison pour laquelle la partie UI ou UX entre en jeu. Nous y avons notre Figma et d'autres outils de conception à l'aide desquels nous pouvons réellement concevoir notre projet, n'importe quelle application. Ainsi, avec Figma, vous pouvez non seulement créer un projet mobile, mais également créer une application pour tablette ou un projet pour tablette. Vous pouvez même concevoir l' apparence d'une application de bureau ou d'une application Web sur un ordinateur portable ou un écran d' ordinateur. Voici donc quelques-unes des fonctionnalités de Figma. Très bien, une autre caractéristique est qu'il existe une fonction de prototypage de Figma. Maintenant, que signifie réellement le prototypage ? Eh bien, imaginez que vous créez une application, d'accord ? Maintenant, lorsque vous essayez de développer l'application, aimeriez-vous pas simplement avoir un prototype ou , disons, une étape pas parfaite pour son déploiement, mais une autre étape de certification, mais une autre étape de certification, un prototype comme si vous étiez toujours confronté à ce genre de choses ? Tu es toujours, tu es toujours en train de tester ce genre de choses. C'est donc votre prototype. Ainsi, même dans votre Figma, lorsque vous créez votre propre design, vous pouvez utiliser la fonction de prototypage de Figma pour voir à quoi ressemblera exactement mon application en temps réel. Lorsque je clique sur ce bouton, façon dont il interagit et tout cela se fera dans Figma. Et la meilleure partie de Figma, c'est que vous n'avez pas besoin de coder un seul code. Tout est basé sur une interface graphique et vous devez simplement cliquer sur certaines choses. Et il existe des raccourcis clavier que vous pouvez utiliser. Tout cela est donc très facile et très simple à suivre. Alors ne vous inquiétez pas, ce cours est très simple et je vais tout vous expliquer étape par étape. Très bien, une autre caractéristique de Figma est qu'il s'agit d'un outil de collaboration. Comme je l'ai mentionné dès le début, cette collaboration signifie essentiellement que vous pouvez collaborer avec vos collègues ou, disons, vos clients. Disons que vous êtes un développeur indépendant, vous êtes un développeur UX indépendant, n'est-ce pas ? Vous voulez donc présenter vos idées, vos éléments de design à votre client. Alors, comment allez-vous leur montrer ? Allez-vous simplement récupérer tous ces trucs et leur envoyer le fichier vidéo ? Non. Vous pouvez simplement partager votre identifiant de connexion ou plutôt vous pouvez simplement dire que vous pouvez simplement partager le lien de votre projet. Ils peuvent se connecter et ils pourront ensuite voir sur quoi vous avez travaillé. Et ils pourront le voir en temps réel. Supposons donc qu'ils laissent des commentaires sur le projet en indiquant qu'ils souhaitent modifier la couleur de la palette de couleurs de peau de votre projet. Ils veulent un style de police différent. Ils peuvent le faire et vous pourrez le voir en temps réel. C'est donc la fonctionnalité la plus fantastique de Figma. Aujourd'hui, Figma n'est pas seulement le seul tabouret design disponible sur le marché. Il existe également d'autres outils tels que votre Adobe XD. La question se pose donc de savoir pourquoi n'utilisons-nous pas Adobe XD ? Adobe, une si bonne marque ? Adobe propose différents produits tels que Premier Pro, After Effects, Photoshop, Lightroom et tout le reste. Alors, au lieu d'utiliser ce logiciel assez haut et un logiciel très fiable, pourquoi utilisons-nous ce Figma ? Eh bien, la raison en est que l'utilisation de Figma est totalement gratuite dans Adobe XD. Tu dois payer un certain prix. Adobe a son abonnement Creative Cloud. Vous devez payer les frais d'abonnement mensuels ou annuels pour accéder à ces applications, sinon vous ne pourriez pas les utiliser. Très bien, c'est donc la partie principale du fémur, qui est totalement gratuite et qui fournit un outil collaboratif. Très bien, maintenant, nous en venons à la partie collaboration. Disons que vous vous trouvez quelque part aux États-Unis et que vous souhaitez présenter votre projet et que votre ventre se trouve quelque part en Europe ou en Afrique du Sud. Alors, comment verront-ils votre projet ? Vous pouvez simplement partager votre lien. C'est donc la flexibilité qu'offre votre Figma. Passons maintenant à la partie concernant l'interface utilisateur et l'expérience utilisateur, ces choses sont-elles identiques ? Y a-t-il une différence ? Et s'il y a une différence, quelle est la différence entre UI et UX ? Ui représente essentiellement votre interface utilisateur, tandis que UX signifie expérience utilisateur. Ui s'occupe de la conception visuelle. À quoi ressembleront l'application , un site Web ou l'un de vos projets ? Et avec l'aide de Figma, vous ne vous occupez pas uniquement de la partie conception de l'application. Vous pouvez même créer des vignettes pour vos vidéos YouTube. Vous pouvez même créer des infographies. Vous pouvez même créer des modèles de diapositives et tout le reste. Ainsi, avec Figma, vous pouvez non seulement vous occuper de la partie application, mais également concevoir votre contenu. C'est ce qu'il y a de mieux à propos de Figma. Donc, l'interface utilisateur indique essentiellement que vous allez vous occuper des couleurs, la mise en page, de la typographie, styles de police, à quoi ressemblerait le téléphone ? C'est la partie topographique qui a été conçue. Alors que l'UX signifie essentiellement que vous allez vous occuper de la partie expérience utilisateur. Maintenant, comment allez-vous réellement le déterminer ? Cet utilisateur aura une expérience fantastique lors de l'utilisation de notre application. Il y aura donc certainement des recherches sur les utilisateurs en cours. Supposons que vous meniez une enquête et que vous demandiez vos clients ou comment aimeriez-vous que notre application soit ? Vos clients répondraient donc quelque chose comme : disons que je veux une interface utilisateur très propre et que je veux que les choses soient simples et très sophistiquées. Je ne veux pas d'animations complexes. Je ne veux pas que des choses complexes soient affichées devant mon écran. Je ne veux donc pas de termes techniques. Je veux que les choses soient affichées devant mon écran en termes simples et profanes. C'est donc ce que vos utilisateurs recherchent. Avant de développer la partie UX, vous devez donc effectuer une recherche utilisateur appropriée. Nous devons mettre l'accent sur la rédaction. C'est donc ce que vous allez adapter au contenu de votre application, n'est-ce pas ? C'est donc votre partie rédactionnelle. Ensuite, vous avez les flux de travail qui indiquent, si vous cliquez sur un bouton, quelles autres choses doivent se passer. C'est donc votre flux de travail. Mais quelles sont les différentes étapes qui se produiront une fois que vous interagissez avec les boutons ou vos icônes de l'application. C'est donc votre flux de travail. Et aussi, comment l'utilisateur interagirait-il avec l'application et quelle psychologie utiliserez-vous pour impliquer autant que possible votre public, vos clients, l'application ou un site Web. C'est donc votre partie UX. Mais bien que ce soient là les différences entre l'interface utilisateur et l'expérience utilisateur, certains éléments se chevauchent : il s'agit de votre wireframing. Maintenant, que signifie réellement le wireframing ? Bien que nous ayons une conférence dédiée au wireframing, permettez-moi de vous donner une brève introduction sur le wireframing. Donc, avant que vous ne soyez un client, disons que je suis un client , que vous veniez vous voir et que je voulais créer un site Web de portfolio. Maintenant, le client est en fait un comptable agréé. Il travaille dans ce secteur depuis dix ans et il a d'excellents clients. Ça va ? Maintenant, si vous devez développer un site Web de portfolio pour ce client, quel contenu pouvez-vous réellement placer sur la page de la première page, sur la page d'accueil, sur la page d'accueil, sur la page À propos de la page Contactez-nous, etc. Donc, le simple fait de former une mise en page constitue votre élément de wireframing. Très bien, puis vient la convivialité. La convivialité est une autre similitude courante entre vous et UX. Cela signifie que comment l'utilisateur utiliserait-il notre application ? Cela ne fait donc pas seulement partie de l'interface utilisateur, cela fait également partie de la partie UX, puis le prototypage, comme indiqué, est abordé. Le prototypage est simplement une application qui s'est développée, mais pas au stade de la production finale, mais au stade des tests, dans une fonctionnalité telle que vous utilisez réellement l'application. Donc, même si l'application n' est pas complètement prête, vous êtes en train de la tester. En fait, vous simulez de telle sorte que l'application semble complètement prête. C'est donc ce que signifie réellement votre prototypage. Donc oui, tout tournait autour la somme de l'introduction à Figma et de tout ça. Vous pouvez simplement ouvrir n'importe quel navigateur que vous utilisez. Je préfère Google Chrome. Vous pouvez simplement ouvrir n'importe quel navigateur et accéder à figma.com. Une fois que vous y serez, vous verrez cette page et vous pourrez simplement créer votre propre compte. Donc, après vous être connecté, voici ce que vous verrez. Maintenant, une fois sur cette page, vous pouvez simplement indiquer le nom de votre équipe. Vous pouvez simplement former un D ou bien vous pouvez le faire plus tard. Une fois que vous avez formé une équipe, vous pouvez simplement partager lien de votre équipe et les membres peuvent rejoindre ce groupe. Et ils pourront voir les projets que vous créez pour ce groupe. Maintenant, même si j'ai dit que ce logiciel Figma est totalement gratuit, il présente certaines limites. Cela signifie que vous pouvez avoir un nombre illimité de fichiers. Supposons que vous ayez certains de vos propres actifs, comme vos images, des vidéos que vous souhaitez intégrer. Tout cela est totalement illimité. Vous pouvez télécharger N fichiers, mais vous ne pouvez concevoir que trois fichiers et vous ne pouvez créer qu'un seul projet. C'est donc l'inconvénient de l'utilisation de votre plan gratuit. Bien que le plan gratuit puisse sembler, vous savez, ne pas être suffisant pour que vous puissiez utiliser toutes les fonctionnalités. Mais pour ce cours en particulier, vous n'avez pas besoin de payer un seul centime pour commencer avec Figma. Très bien, commençons donc par le plan gratuit et nous continuerons lors de la prochaine conférence. 3. (2) Vue d'ensemble: Bienvenue à nouveau dans le cours. Dans ce didacticiel vidéo, je vais vous donner à tous un bref aperçu Figma en tant qu'espace de travail. Et nous apprendrons certaines des choses que nous avons dans Figma. Très bien, dès que vous vous inscrivez et que vous créez votre propre compte, vous recevrez un e-mail de confirmation à votre adresse e-mail. Alors, allez-y et confirmez qu' il s'agit bien de vous et que vous essayez de créer un compte Figma. Une fois que vous avez fait cela, gardez simplement tout ce que cela vous incite à faire. Ils essaieront également de vous faire visiter rapidement Figma, mais vous n'avez pas à vous inquiéter à ce sujet. Je fais exactement la même chose ici. Très bien, alors maintenant, une fois que vous arrivez sur cette Figma en tant que page d'accueil, vous verrez que vous avez deux options. Vous pouvez créer un nouveau fichier de conception ou un nouveau fichier figjam. Maintenant, qu'est-ce que ce gros fichier de confiture ? Considérez-le donc comme un tableau blanc où vous pouvez réfléchir à vos idées et explorer certaines idées. Très bien, c'est donc votre dossier d'examen. Alors que le fichier de conception est l' endroit où vous avez réellement essayé de concevoir et de créer des prototypes pour votre application. Comme vous pouvez le voir dans l'onglet Résultats, dans cet onglet de gauche, vous verrez que vous avez des raisons. Ainsi, les projets récents sur lesquels vous avez travaillé seront présentés sous forme de brouillons. Ainsi, les éléments que vous n'avez pas enregistrés manuellement seront enregistrés automatiquement et vous le verrez, et vous le verrez ici. Donc, tout comme dans votre Gmail, vous essayez de rédiger un e-mail et vous ne l'envoyez pas, que se passe-t-il là-bas ? Il est automatiquement enregistré dans la partie brouillons. C'est exactement ce que fait votre Figma ici. Ensuite, vous verrez leurs équipes ici. Combien d'équipes avez-vous créées jusqu'à présent, et qui en sont les membres ? Qu'est-ce qu'un projet d'équipe sur lequel vous avez travaillé ? Vous pourrez donc voir toutes ces choses ici. Comme il s'agit de la toute première vidéo d'une autre, je dois dire qu'au tout début de notre cours, je n'ai créé aucun fichier jusqu'à présent. Donc, toutes ces choses que vous verrez ici, sont les fichiers qui ont déjà été créés par l'équipe Figma. Et c'est juste pour que vous puissiez y jeter un coup d'œil et comprendre comment l'utiliser et concevoir un outil. Essayons donc de créer un nouveau fichier de conception. Et une fois que j'aurai cliqué ici, vous verrez que voici à quoi ressemble l'espace de travail de Figma. Maintenant, ils vont essayer de vous indiquer si vous souhaitez faire une visite rapide de Figma ? Cliquez donc simplement sur ces nouveaux réservoirs et continuez avec l'espace de travail. Ainsi, en haut, vous pouvez voir ce que vous avez se trouve dans votre barre d'outils. C'est ce que l'on appelle une barre d'outils car vous pouvez y travailler avec un certain nombre d'options. Maintenant, outre ce brouillon, vous verrez qu'il est sans titre. Vous pouvez donc simplement cliquer sur les brouillons. Mais je devrais plutôt dire que vous pouvez simplement cliquer sur ce titre et renommer le projet. Disons que je veux donner un titre à ce test. Le titre de mon projet est donc test. Et une fois que j'ai cliqué sur ce bouton déroulant, j'ai la possibilité d'afficher l'historique des versions. Cela signifie quelles étaient les autres choses que j'avais faites auparavant ? Si je souhaite l'exporter dans un format de fichier PNG ou JPEG, je peux le faire. Si je veux dupliquer ce projet, je peux le faire. Si je devais le renommer, je pourrais le faire également. Si je veux le supprimer, si je veux ajouter ce fichier à mes favoris, si c'est le cas, si je veux déplacer ce projet vers une autre équipe, ou disons un autre emplacement de dossier. Je peux le faire aussi. Voici donc toutes les fonctionnalités de ma barre d'outils. En haut, nous avons une barre d'outils, vous pouvez donc voir la barre d'outils. J'ai cette icône en forme de curseur. Une fois que j'ai cliqué sur cette liste déroulante, j'ai la possibilité de déplacer ou de redimensionner. Alors déplacez-vous, vous pouvez simplement cliquer sur certaines des compétences que vous pourriez avoir sur votre espace de travail et les déplacer d'un endroit à un autre. La partie balance essaiera en fait de redimensionner votre taille. Supposons donc que vous souhaitiez augmenter de 1,5 fois. Vous pouvez donc le faire à l'aide de la balance. Ensuite, vous l'avez comme cadre, section et trancheuse. Si je clique sur le cadre, si je clique ici, vous pouvez voir qu'un cadre a été créé pour nous. Qu'est-ce que cela nous permet de faire maintenant ? Sur ce cadre ? Vous pouvez réellement dessiner des formes. Vous pouvez réellement le dessiner à l'aide du stylo. Vous pouvez en fait ajouter tout ça. Disons qu'en utilisant ce bouton rectangulaire, je peux créer la forme que je souhaite. Il existe donc certaines formes prédéfinies que vous pouvez créer en les faisant simplement glisser. Vous avez donc un rectangle, une flèche linéaire, ellipse, une étoile polygonale, et vous pouvez même placer une image ou une vidéo si vous le souhaitez. Vous pouvez maintenant voir qu'il existe des touches de raccourci sur lesquelles vous pouvez appuyer sur votre clavier pour simplement dessiner votre rectangle. Supposons que je clique sur ce rectangle et que je doive le dessiner. Maintenant, disons qu'au lieu de cliquer ici, si je veux dessiner une flèche, que puis-je faire à la place ? Je peux juste, laisse-moi juste supprimer ça. À partir de maintenant. Je vais simplement le supprimer en utilisant la touche de suppression. Très bien, je peux simplement maintenir ma touche Shift et j'appuierai sur mon bouton du clavier. Une fois que j'ai fait cela, vous pouvez voir que la flèche a été sélectionnée. Vous pouvez voir que la forme de la flèche a été sélectionnée. Maintenant, je peux simplement le faire glisser et la forme de flèche sera dessinée. Ça va ? Voici donc ce que je peux faire dans mon cadre. Voici donc mon cadre et vous pouvez voir toutes les différentes formes que j' ai dans mon cadre particulier. Donc, sur le côté gauche, cette partie particulière est mon panneau Layers. Vous pouvez voir que j'ai différentes couches et que nous travaillons actuellement sur la page numéro un. Vous devez donc l'avoir vu sur de nombreux sites Web, nous avons une page d'accueil, une page à propos une page Contactez-nous. En fait, même sur mon site Web, vous verrez ma page d'accueil. À propos de la page Contactez-nous. Combien de cours j'ai et tout ça, tout cela se trouve sur mon site Web. Il y a donc plusieurs pages. Donc, si vous souhaitez d'abord concevoir la page d'accueil, la page blanche est conçue pour la page Contactez-nous. Ensuite, vous voudrez peut-être concevoir les services que vous offrez sur toute cette page. Vous pouvez donc simplement cliquer sur cette icône plus et un certain nombre de pages seront créées pour vous. Très bien, vous pouvez simplement le supprimer si vous le souhaitez. Supposons que vous souhaitiez renommer cette page pour exemple, la page À propos de nous. Vous pouvez donc le faire si vous souhaitez supprimer le patient par trois, vous pouvez le faire. Si vous voulez dupliquer certaines pages, disons que dans le cas d'une page, peu importe ce que nous avons créé jusqu'à présent, je veux le dupliquer afin de pouvoir simplement le dupliquer et créer une nouvelle page avec le titre de la page numéro deux. Exactement les mêmes choses que celles que j' ai sur ma page numéro un. Et si je veux apporter de légères modifications, je peux le faire dans mon pH2. C'est donc ce que Figma nous permet de faire. Très bien, passons maintenant à la partie suivante Il y a des actifs dans le panneau des couches. Ces actifs nous permettent désormais de créer certains actifs afin de pouvoir utiliser différents projets Sigma. Disons donc maintenant que ce cadre particulier a un enchevêtrement et une forme de flèche. Supposons maintenant que je veuille en créer un actif, même si cet actif ne signifie rien, accord, il ne sert à rien. Ce n'est même pas un élément de conception, mais c'est juste pour le plaisir créer un actif que je puisse également utiliser dans mes autres projets. Je peux le faire. J'ai les fonctionnalités pour le faire, pour le faire. Très bien, c'est ce que nos actifs nous permettent de faire. Maintenant, dans cette barre d'outils, j'ai également l'outil stylo. À l'aide du stylet, je peux cliquer sur un sommet, je peux cliquer sur les autres sommets. Je peux le faire glisser ainsi pour créer un objet. Disons que cet objet a été créé. Cela forme donc un triangle. Si vous pouvez voir un triangle un peu, c' qu'un triangle s'est formé. Et pour m'en sortir, je peux. Ce que je peux faire, c'est simplement double-cliquer sur n'importe quel sommet et il en formera un. Je peux simplement cliquer sur OK. Et vous pouvez voir qu'une forme s'est formée. C'est ce que l'ajout à nous permet de faire. J'ai également la possibilité de dessiner à main levée, c'est ce que mon outil Pencil nous permet de faire. Disons que je dessine ceci à l'aide du crayon. Un rectangle a été formé, mais cette fois-ci, je n'ai pas eu à cartographier les sommets. J'ai dû le dessiner à main levée. Donc, si vous avez une tablette graphique parfaite, vous pourrez utiliser le crayon de manière très efficace. Sinon, utiliser la souris n'est pas la meilleure façon de dessiner une forme. Vous pouvez utiliser le stylo à la place. Très bien, alors nous avons la zone de texte, d'accord ? Vous pouvez donc, ce que vous pouvez faire, vous pouvez simplement cliquer sur ce texte ou vous pouvez simplement appuyer sur la touche T votre clavier et cliquer n'importe où sur le cadre. Maintenant, vous pouvez taper tout ce que vous souhaitez donner et vous pouvez même définir une partie de la couleur de votre texte. Vous pouvez définir le style de texte si vous l'avez fait, disons que vous souhaitez le mettre en forme en gras et souligné. Alors, comment pouvez-vous le faire ? Si vous souhaitez augmenter la taille de cette police, vous pouvez même le faire pour accent sur ce panneau des propriétés de conception, qui se trouve sur le côté droit. Il se peut donc que nous ne puissions pas le voir complètement. Donnez-moi juste une seconde et vous pourrez voir complètement ce panneau de propriétés de conception. Alors maintenant, j'espère que vous devez pouvoir voir ce panneau de propriétés de conception. Et ici, vous pouvez voir que j'ai la capacité de donner de la couleur à ce texte. Disons que je veux donner cette couleur pouvoir donner cette couleur rouge. Très bien, j'ai la possibilité d'aligner ce texte au centre ou peut-être de l'aligner à droite, gauche et tout ça. Ensuite, j'ai la possibilité d'exporter tout au format PNG. Si je veux le faire, je peux le faire. Ainsi, dans ce panneau de propriétés de conception, vous pouvez simplement sélectionner n'importe quel élément et vous pouvez voir tous les éléments de conception que vous pouvez gérer. Donc, ici, vous pouvez concevoir, créer des prototypes, vous pouvez même inspecter certains éléments. Maintenant, que signifie réellement cet élément d'inspection ? Donc, si vous avez travaillé sur le développement Web, vous devez être familiarisé avec la partie HTML et CSS. Vous pouvez donc voir toute la partie conception est réalisée avec le CSS, à l'aide de feuilles de style CSS en cascade, c'est ce que représente votre CSS. Donc, ici, si vous voulez faire exactement la même chose sur votre page Web, vous pouvez simplement copier ces styles CSS et les coller dans votre fichier. Vous pouvez même l'importer au format CSS. Si vous souhaitez développer une application iOS, vous pouvez copier le tout et le coller dans votre projet iOS. Sur Android, vous pouvez faire la même chose. Ainsi, même si vous ne pouvez pas complètement intégrer tout cela dans votre projet Android ou iOS, la majeure partie de la conception est réalisée par Figma elle-même. Nous pouvons simplement copier le code et la plupart d'entre eux, majeure partie du travail est faite pour vous tous. C'est la fonctionnalité fantastique de Figma. Et oui, c'est à peu près tout. Nous avons également l'icône en forme de main qui vous permet de passer d'une partie à l'autre. Disons que vous avez cette interface numéro deux, vous avez ce cadre un. Et voyons voir, vous créez également un cadre supplémentaire. Supposons que vous créez un cadre supplémentaire. Vous voulez maintenant passer d'une partie à l'autre. Vous pouvez simplement le faire glisser à l'aide de cette icône en forme de main. Très bien, disons que vous souhaitez laisser quelques remarques spéciales pour cette boîte rectangulaire en particulier. Vous pouvez donc simplement laisser ici une chose courante qui fait que cette boîte rectangulaire a l'air cool. Et tu peux juste le mettre ici. Maintenant, lorsque vous partagez le lien de votre projet Figma, vous pouvez voir que vous pouvez partager le lien. Vous pouvez simplement copier ce lien et le partager par e-mail ou sur n'importe quelle plateforme de réseau social. Et lorsqu'ils accèdent à ce projet, ils peuvent simplement cliquer dessus et voir le commentaire qu'ils ont laissé. Et ils peuvent même y apporter des modifications. Supposons que c'est la question que j'essaie de poser et qu'une autre personne, mon autre collègue ou mon client puisse l'appliquer. Ça va. La taille de la boîte a l'air cool, mais je veux changer la couleur de la forme pour qu'ils puissent laisser un commentaire disant que cela vient de changer la couleur de la boîte. Ça va ? Et c'est ce que notre commentaire nous permet de faire. s'agissait donc que d'un bref aperçu de notre Figma et de la façon dont les différents outils sont présents dans Figma. quoi allons-nous faire face à tout ce cours et à tout ça ? Donc, dans la prochaine conférence, nous allons nous concentrer uniquement sur la barre d'outils. Nous allons donc examiner chaque fonctionnalité de nos offres de barre d'outils et nous essaierons créer certaines choses en utilisant les fonctionnalités de la barre d'outils. Bien. 4. (3) Barre d'outils: Bonjour à tous, bienvenue dans un autre didacticiel vidéo. Dans cette conférence, nous allons nous concentrer sur notre barre d'outils dans Figma. Donc, même si j'avais partagé à peu près tout sur la barre d'outils, il reste encore certaines choses. Nous allons donc aborder ce sujet dans ce didacticiel vidéo. Très bien, comme vous pouvez le voir, c'est notre espace de travail. Et dans ce cadre particulier, et dans ce cadre particulier, nous avons une boîte rectangulaire, nous avons un commentaire, nous avons dessiné une forme à l'aide du stylo. Nous avons dessiné un rectangle à l'aide du crayon, nous avons des textes, des flèches. Maintenant, qu'en est-il de cette icône figma ? À quoi ça sert ? Que pouvons-nous faire à l'aide de ce bouton d'action du menu principal ? Vous pouvez donc simplement revenir aux fichiers, fichiers précédents sur lesquels vous avez travaillé, et vous pouvez simplement passer à un autre fichier. Voici donc le fichier de test sur lequel nous travaillions, nous étions en train de travailler. Je vais donc simplement double-cliquer dessus. Et ce projet Figma nous sera ouvert. Si vous souhaitez réellement importer ce fichier. Si vous souhaitez exporter, je devrais plutôt l'exporter sous la forme d'un PNG ou d'un JPEG. Vous pouvez simplement cliquer sur le menu déroulant de cette icône figma, et vous pouvez simplement cliquer sur ce fichier et vous avez également la possibilité de l'exporter sous forme de PDF. Ainsi, en fonction du nombre de pièces que vous avez créées, vous pouvez créer le PDF. Supposons donc que vous souhaitiez ensuite exporter les cadres au format PDF. Actuellement, sur cette page, page 1, combien de cadres avons-nous ? Nous n'avons pas d'autres cadres. Comme vous pouvez le voir ici, nous n'avons qu' un seul cadre surligné sur la deuxième page, nous avons deux cadres, le cadre un, le cadre deux. Alors maintenant, si je souhaite l' exporter sous forme de PDF, si j'ouvre ce PDF, vous verrez que ce PDF comporte deux pages, page une et la page deux, la page lorsqu'elle est complètement vide car ce cadre ne contient aucun autre élément. Maintenant, bien que nous ayons créé ce cadre, nous l'avions dessiné manuellement à l'aide du curseur. Et si vous vouliez réellement concevoir une application ? Ou disons que vous souhaitez concevoir une application mobile adaptée à votre iPhone. Vous allez donc simplement cliquer sur ce cadre, sélectionner le cadre. Et dans le panneau des propriétés, ce panneau des propriétés de conception, permettez-moi de me déplacer vers la gauche. Vous avez différentes options pour créer un cadre pour iPhone 14, 14, 14 plus, disons que je souhaite créer un cadre pour iPhone 14. Ce sont donc les dimensions exactes dans lesquelles je pourrais vouloir travailler pour mon application. C'est donc ainsi que je crée un cadre pour un périphérique matériel particulier. Je peux à nouveau cliquer sur mes cadres. Je le peux. Et j'ai la possibilité de choisir n'importe quel appareil Android et grand téléphone Android, Android petit. J'ai la possibilité de choisir entre iPhone 814 et ainsi de suite. J'ai différentes options pour choisir entre différentes tablettes, comme votre Surface Pro ou votre iPad. Je peux choisir un ordinateur de bureau comme un MacBook Air, MacBook Protein Inch Pro, bureau MacBook 816 pouces Pro. Et je peux également créer une présentation. Disons que je vais créer un diaporama dont ratio 16 est 29, donc je peux le faire aussi. Je peux même créer des diapositives de quatre, soit un ratio de 234 par trois. Je peux créer une application ou un design pour ma montre connectée. Je peux même créer le format du papier, disons au format A4, au format A5 et tout ça. Si je veux créer une image pour mes publications Instagram, je peux cliquer dessus et cela créera un cadre pour la taille exacte des données. Ce Figma nous permet donc également de créer un post Twitter, en-tête Twitter et tout le reste. Figma est si flexible qu'elle nous permet de créer des cadres pour différentes choses sur lesquelles nous pourrions avoir envie de travailler. Donc, comme vous pouvez le voir, c'est mon cadre. J'ai également la possibilité de trancher. Alors, qu'est-ce que cela signifie réellement ? Supposons donc que dans ce cadre en particulier, un , un cadre, je veuille en découper une partie. Je peux donc simplement cliquer sur cette tranche et faire glisser la partie de la boîte rectangulaire que je souhaite exporter séparément. Donc, une fois que j'ai fait cela, je peux simplement cliquer ici et cliquer sur Exporter. Maintenant, je peux l'exporter sous forme de JPG, SVG. Svg est essentiellement votre format d' icône, SVG. Si vous l'exportez au format SVG, cela signifie essentiellement que vous pouvez utiliser sous la forme d'une icône fabuleuse. Vous pouvez l'utiliser comme icône pour votre site Web. C'est donc ce que signifie réellement votre SVG. Vous pouvez même l'exporter au format PDF. Si je l'exporte au format PDF, ce que cela fera, il l'exportera réellement. Et essayons de l'exporter au format PNG. Et une fois que j'aurai fait cela, et si je l'ouvre, vous verrez qu'une partie de mon cadre a été découpée, et maintenant c'est cette image en particulier. Ça va ? C'est ainsi que vous découpez certaines des choses que vous avez également la possibilité de déplacer et de redimensionner. Supposons que vous vouliez redimensionner cette forme, ou disons que je vais plutôt en créer une. Disons une ellipse. Je vais dessiner une ellipse. Cool. Supposons maintenant que je veuille agrandir cette forme de cercle. Donc, si je clique sur ce sommet en particulier et si je veux l'agrandir , je peux le faire. Mais vous pouvez voir que la forme elle-même change également, mais je ne veux pas que cela se produise. Donc, ce que je peux faire à la place, c'est simplement maintenir ma touche Shift enfoncée. Et maintenant. Même si je déplace mon curseur de haut en bas, vous pouvez voir qu'il ne change pas de forme à l'aide de la touche Shift. Vous pouvez voir même si, même si je déplace mon curseur de haut en bas, de gauche à droite, il essaie simplement d'agrandir ma forme. Il ne cherche pas à modifier les propriétés de ma forme. Très bien, c'est ce que notre touche Shift nous permet de faire. Vous pouvez facilement agrandir n'importe quelle forme, pas seulement votre ellipse, mais même votre rectangle ou votre forme personnalisée. Vous pouvez l'étendre à l'aide de la touche Shift. Il suffit donc de maintenir la touche Shift enfoncée et de cliquer sur n'importe quel sommet pour l'agrandir. Très bien, c'est donc votre forme que vous voudrez peut-être créer. Vous pouvez également créer une étoile. Supposons que vous vouliez créer une étoile. Donc, comme vous pouvez le voir, lorsque je dessine l'étoile, vous pouvez voir que la forme elle-même change également. Donc, pour le moment, les bords sont assez longs, mais la largeur est très petite, mais je ne veux pas que cela se produise. Donc, ce que je peux faire à la place, c'est simplement maintenir touche Shift enfoncée et agrandir ma forme d'étoile. Cool. Nous avons également différents composants. Nous pouvons télécharger certains plug-ins. Maintenant, que signifie réellement ce plugin ? Donc, si vous avez travaillé sur WordPress, vous connaissez peut-être les plugins. Les plugins sont donc essentiellement des fonctionnalités auditées, développées par certains développeurs. Et ils peuvent désormais être exécutés gratuitement. Maintenant, une fois que vous avez installé ces plugins dans votre projet particulier, la majeure partie du travail est effectuée par le plug-in lui-même. Vous n'avez pas à vous soucier de la façon dont vous allez faire ces choses manuellement. Donc, tout comme vous pouvez le voir à propos de votre icône plate, que fera ce plugin ? Ce plugin vous aidera en fait à importer certaines des icônes directement depuis cet appartement que je peux brancher. Vous n'avez donc pas à vous rendre sur un autre site, rechercher les plugins, les télécharger et à les télécharger ici. Vous pouvez simplement utiliser directement ce plugin. Une fois que vous avez installé ce plugin pour votre projet, vous pouvez simplement rechercher l'icône que vous recherchez et qui sera directement importée dans votre projet. C'est donc la fonctionnalité intéressante de Figma, à savoir que vous avez la possibilité et la grande variété de choisir entre différents plugins. De plus, vous pouvez même exporter votre formulaire de conception de Jeff ou un format vidéo. Donc, normalement, vous pouvez le voir, vous pouvez soit exporter votre projet Figma au format PDF, soit au format PNG ou JPEG, essentiellement un format statique, non un format dynamique. Ainsi, à l'aide de ces différents plugins, vous pouvez même l'exporter au format vidéo. Très bien, alors nous avons différents plug-ins et autres éléments pour que vous puissiez rechercher et télécharger le plug-in en fonction de vos besoins. Ce n'est pas quelque chose de rigide ou de fixe que vous devez utiliser ce plugin en particulier. Nous avons également différents widgets que vous pouvez utiliser. Nous avons également la possibilité d' intégrer Jira et Asana. Ces deux outils de gestion de projet vous permettront gérer vos flux de travail et votre équipe. Très bien, voici donc tous les widgets que nous avons. Donc oui, c'est à peu près tout. C'est ce que nous avons. Sinon, le reste des éléments tels que votre texte, vos commentaires, les différentes formes, le cadre, la possibilité de se déplacer différemment entre différents objets et vos cadres a déjà été abordé dans les conférences précédentes. Je n'ai donc pas besoin de répéter ces choses encore et encore. Très bien, donc tout cela était de mon côté pour cette conférence en particulier. Je vous verrai lors de ma prochaine conférence. Prends soin de toi. 5. (4) Panneau de couches à Figma: Bonjour à tous, bon retour à la vidéo. Dans cette conférence vidéo, nous examinerons le panneau des couches. Ainsi, bien que nous ayons déjà abordé le panneau Calques, il nous reste encore quelques points à aborder. Donc, comme vous pouvez le voir sur cette page, numéro deux, nous avons des cadres différents, d'accord ? Et dans chaque image, nous avons créé des formes et des vecteurs différents, n'est-ce pas ? Et d'ailleurs, ce vecteur n'est rien d'autre que la forme que vous avez créée à l'aide du stylet. C'est donc ce qu'est votre vecteur. Maintenant, supposons que si vous souhaitez renommer certaines de vos formes, disons qu'au lieu d'une ellipse, vous souhaitiez donner ce titre en cliquant simplement ici ou ici. Et vous pouvez double-cliquer sur cet objet particulier et vous pouvez simplement lui donner n'importe quel nom. Disons que je vais donner ce titre sous forme de cercle, cercle un. Au lieu de l'ellipse 1, je voudrais nous en donner une encerclée. Ça va ? C'est ainsi que je peux renommer n'importe laquelle de mes formes, pas seulement les formes, toutes les choses que vous avez pu créer dans votre espace de travail Figma. Maintenant, et si vous souhaitez supprimer certains éléments que vous avez dans votre espace de travail, vous savez. Supposons que vous souhaitiez supprimer la troisième image. Vous souhaitez également supprimer ce cadre pour iPhone 14. Comment peux-tu faire ça ? Eh bien, vous le faites manuellement, exemple en cliquant avec le bouton droit sur ce cadre en particulier, puis recherchant simplement une suppression ou en cliquant simplement sur le bouton de suppression. Vous pouvez le faire, mais il existe un moyen plus court de le faire. Vous pouvez simplement maintenir touche Shift enfoncée et sélectionner plusieurs éléments, et vous pouvez simplement supprimer l'ensemble de votre cadre. Vous pouvez donc voir que toutes ces choses ont été supprimées jusqu'à présent. Cool. Même ce cadre sera supprimé, non ? C'est donc ce qu'il nous reste, juste le cadre numéro un. Vous pouvez maintenant voir que nous sommes au Zoom. Le pourcentage de zoom est de 78. Supposons que je veuille zoomer sur environ 01:25. Je peux donc simplement maintenir le bouton de contrôle enfoncé et utiliser la molette de défilement de ma souris. À l'aide de la molette de la souris, vous pouvez zoomer et dézoomer, mais vous devez maintenir le bouton Ctrl enfoncé. Si je maintiens la touche Maj enfoncée et que j'utilise le bouton de défilement ou, vous savez, la molette de défilement de ma souris pour basculer entre le côté gauche côté droit de mon espace de travail. Je peux le faire. Donc, au lieu d' utiliser manuellement mon curseur et ma souris, je me déplace du côté gauche vers le côté droit, naviguant vers la lumière de gauche, à droite. Je peux simplement maintenir touche Shift enfoncée et utiliser la molette de défilement de ma souris. Très bien, voici donc certaines des choses. Maintenant, je peux même regrouper certaines de ces choses. Comme si je pouvais simplement utiliser mon curseur, assurez-vous que vous avez sélectionné ce bouton de déplacement. Et tu peux tout sélectionner. Et maintenant, en utilisant cela, vous pouvez simplement les regrouper à l'aide de la commande G. Ainsi, tout est désormais formé dans un seul groupe. Maintenant je peux les déplacer. Vous pouvez voir que tout peut être déplacé. Tout cela peut être déplacé. Disons que je crée un autre cadre. OK, je peux créer un autre cadre. Par exemple, disons, je veux créer un cadre de bureau. Ça va ? Donc pour, disons, un MacBook Pro 14 pouces. Vous pouvez donc voir que le cadre du MacBook Pro 14 pouces a été créé pour moi. Je peux simplement le faire glisser et placer ici ou bien le placer ici ou bien je peux simplement en faire une copie et le coller là-bas. Pour ce faire, je peux simplement maintenir le Contrôle et cliquer sur D ou Contrôle D, et cela sera reproduit ici. Très bien, je n' ai pas besoin de faire ça. Contrôle C et contrôle V. Je peux simplement utiliser le contrôle D et je peux en faire glisser la copie dupliquée. Très bien, vous pouvez donc voir que j'ai deux cadres sur ma page numéro deux, et je peux également basculer entre différentes pages. J'ai donc différentes pages, mais je souhaite supprimer d'autres pages. Alors, que vais-je faire ? Je peux simplement cliquer ici et cliquer sur Supprimer, ou je peux simplement cliquer sur ce clic droit et le supprimer. Ça va ? Donc, cette coche indique essentiellement que vous êtes à la page six ou bien vous pouvez même voir ici que vous êtes à la page six. Très bien, je vais juste le supprimer. Et maintenant, nous en sommes à la page deux. Nous avons le cadre du MacBook Pro 14 pouces et celui que nous avons dessiné manuellement. Très bien, maintenant, qu'en est-il des actifs dans le panneau des couches ? Qu'en est-il ? Comment pouvons-nous l'utiliser ? Disons que je veux réellement créer un actif, disons une voiture. Vous devez avoir vu une voiture sur un site Web. Si vous ne le savez pas, essayons simplement de créer une carte simple. Très bien, je vais aussi me laisser cliquer sur ce groupe et je pourrai supprimer celui-ci. Très bien. Maintenant, ce que je vais faire, est créer une forme rectangulaire de couleur blanche. Donnons-la simplement en couleur blanche. Et je vais le donner , mais laissez-moi simplement le sortir de mon cadre, sinon vous ne pourrez pas voir ce que je fais. Très bien, cette boîte a donc été déplacée hors de mon cadre. Je vais maintenant donner ce rayon de bordure. Maintenant, je vais juste cliquer dessus. J'ai la possibilité de donner un rayon de bordure. Voici donc mon rayon d'angle. Maintenant, je travaille dans le domaine du développement Web et j'aime appeler ce rayon frontalier américain. Vous pouvez même appeler ce rayon d' angle S dans Figma, nous l'appelons rayon d'angle S. Donc, si je dis, je veux dire que c'est un rayon d'environ dix. Disons 20. Jusqu'à zéro. Vous verrez donc qu'il y a quelques bords légèrement pliés. Les bords ne sont pas tranchants. C'est possible en utilisant le rayon d'angle, je peux même le modifier en 50, disons. 50, c'est ce que j'ai sélectionné. Et oui, c'est à peu près nul. Et maintenant, ce que je vais faire, c'est en créer un. Je vais créer une ellipse. Ça va ? Je vais créer une zone de texte. Je peux donner le nom comme je le fais. Je veux que la couleur de mon texte soit noire. Alors, faisons en sorte que ce soit Black. Joe. Les blogs augmentent également la taille du texte. Donc, au lieu de simplement , disons simplement 24. J'espère qu'il sera visible pour quatre personnes. Agrandissons simplement à 36. Oui. Le nom de cette personne est donc Joe Bloggs. Et ce que je vais faire, la prochaine chose que nous voulons faire, c'est simplement dire quelque chose comme développeur Web. D'accord, nous devons modifier les statistiques de texte, de couleur et de taille. Oui. Donc développeur web, freelance et portails. Nous pouvons voir un ingénieur logiciel. Ingénieur logiciel. Très bien. Maintenant, je peux simplement sélectionner tout cela. Je peux utiliser les textes de la ligne centrale. Très bien, je peux agrandir la taille de la zone de texte pour qu'elle apparaisse bien. Je peux juste cliquer ici. Je peux l'agrandir. Hein ? Oui, c'est à peu près tout. Maintenant, ce que je vais faire, c' est utiliser le plugin Unsplash pour pouvoir importer une image. Dans la section plugin, je peux rechercher Unsplash et cliquer sur ce bouton Exécuter. Une fois que j'aurai fait cela, il faudra un certain temps pour exécuter ce plugin particulier pour vous. Et vous pouvez rechercher n'importe qui. Disons que vous voulez un ingénieur ? Ingénieur ? Je cherche juste. Ouaip. Je vais juste cliquer sur cette image. Et je peux le déplacer ici. Cette image est donc trop grande, mais nous allons l'ajuster en fonction de notre, euh, vous savez, vous pouvez voir qu'une fois que je l'ai fait glisser dans mon ellipse, elle a été redimensionnée en conséquence. Très bien, voici à quoi ressemble ma carte. Maintenant, ce que je peux faire, c'est sélectionner tout cela. Je peux sélectionner tout cela. Et ce que je peux faire, les regrouper à l'aide de la touche de raccourci Control G. Et je peux utiliser le contrôle des dix K pour constituer un actif. Maintenant, ce groupe 2 est désormais mon atout. Sinon, vous pouvez sélectionner l' ensemble de ce groupe et vous avez la possibilité de créer un composant. Vous pouvez donc simplement créer un composant et maintenant un actif a été créé pour nous. Vous pouvez donc simplement accéder à cette partie consacrée aux ressources et importer cette ressource dans votre MacBook Pro 14 pouces ou tout autre cadre ou n'importe quelle page que vous souhaitez utiliser. Supposons que de la première page à la page À propos de nous, Supposons que de la première page à la page À propos de nous je souhaite importer cette ressource. Donc, ce que je vais faire ici, je vais simplement créer un nouveau cadre, disons, de mon iPhone Pro. Maintenant, j'aimerais apporter mon acide. Vous pouvez maintenant voir que cet actif a été évoqué, n'est-ce pas ? Disons que ce cadre a un arrière-plan ou je peux l'importer. Vous pouvez voir que c'est exactement la même chose. Même les dimensions sont exactement les mêmes. 5,7 par 616. Si je reviens à ma deuxième page, je suppose. Oui. Donc, ici aussi, nous avons 5,7 sur 616. Voilà donc ma largeur et ma hauteur. Voici donc toutes les choses que j'ai pu faire en utilisant le panneau des couches, la barre d'outils et tout ça. 6. (5) Alignement et distribution à Figma: Salut à tous, bienvenue sur une autre vidéo. Dans ce didacticiel vidéo, nous allons en apprendre davantage sur les alignements et la distribution dans Figma. Comme vous pouvez le voir devant mon écran, j'ai créé un cadre à l'intérieur duquel j'ai un enchevêtrement. Maintenant, vous pouvez voir que dès que je sélectionne ma boîte d'enchevêtrement dans le panneau des propriétés de conception, j'ai la possibilité d'aligner réellement ma boîte. Je peux donc soit l' aligner vers la gauche. Je peux soit l'aligner vers la droite, soit même l'aligner vers le centre. Maintenant, que se passe-t-il si je choisis cette gauche alignée ? Donc, dès que je clique dessus, il l'a aligné sur le côté gauche, le plus à gauche. Vous pouvez voir, maintenant, si je le fais glisser vers le haut, vous pouvez voir que c'est possible, même si je peux même le placer quelque part entre les deux, je peux le faire. Et dès que je clique sur le bouton Aligner à gauche, encore une fois, il l'a aligné sur le côté gauche. Encore une fois. Maintenant, cela se produit par rapport à l'axe X. Comme vous pouvez le voir, cela se produit par rapport à l'axe X, n'est-ce pas ? Et si je voulais réellement aligner cette boîte en particulier pour, disons, aligner des centres horizontaux. Maintenant, ce qui se passe dans ce cas, c'est en fait qu'il s'agit d'aligner notre boîte en position centrale par rapport à l'axe des abscisses. De même, si je veux l' aligner sur la droite, je peux le faire. Comme vous pouvez le voir, une fois que j'ai cliqué ici, il n' est pas aligné sur la droite. Si je clique sur ce bouton qui indique qu' il est aligné vers le haut, mon élément est maintenant aligné sur le côté le plus à droite. Maintenant, pourquoi ? C'est parce que nous l'avons déjà sélectionné. Nous voulons l' aligner sur la droite. Et si je veux que ma boîte soit en haut, mais pas dans la partie la plus à droite, mais plutôt dans la partie la plus centrale. Je peux donc sélectionner le centre. Et maintenant, vous pouvez voir que c'est également l'axe central, mais qu'il se trouve également en haut de la page. Cela se produit donc par rapport à l'axe Y. L'alignement vers le haut se fait par rapport à l'axe Y et à l'axe X. Maintenant, que se passe-t-il si je sélectionne l' alignement des centres verticaux ? Il s'aligne donc par rapport à l' axe Y, et non à l'axe X. Donc, même si je le dis de cette façon, disons que je le place quelque part ici. Maintenant, si je fais cela, vous pouvez voir que cela l'aligne au centre par rapport à l'axe Y. Donc, même en faisant l'axe X, mes cases vers la gauche, cela les aligne au centre par rapport à l'axe Y ? Correct. De même, j'ai d'autres options pour l'aligner vers le bas. Cela signifie qu'il va s'attacher aux zéros et à l' axe Y, n'est-ce pas ? Je peux même l'aligner sur le reste, disons que je veux qu'il soit sur le côté le plus à droite, mais aussi en bas. Si je veux être au top. Et je veux que ce soit l'Irlande, je peux le faire aussi. Voici donc certaines des choses que je voulais vous montrer à tous. Ça va ? Il s'agissait donc d'un élément individuel. Maintenant, que se passe-t-il lorsque nous avons un groupe d'éléments ? Disons que j'ai cette boîte et une boîte plus petite aussi. Et si j' essayais de les regrouper ? essaie pas vraiment de les regrouper à l'aide de commande G. Mais au lieu de cela, si je peux simplement sélectionner ceci à l'aide de ce bouton de déplacement, je peux réellement les sélectionner. Maintenant, si j'ai essayé de l'aligner sur le côté le plus à gauche, vous pouvez voir que mon image a maintenant disparu. Ma boîte rectangulaire a maintenant disparu, mais elle n'est allée nulle part. Il se trouve juste derrière ou vous pouvez dire qu'il se trouve juste à l'extrême gauche par rapport à mon élément parent. Ainsi, une fois que vous essayez de regrouper certains éléments, Figma comprend automatiquement que le plus petit élément, la plus petite forme, est l'élément enfant, tandis que l'élément qui est dans la forme la plus grande lorsque la taille est plus grande est votre élément parent. De même, nous avons également des frères et sœurs, ce qui signifie que disons que je crée aussi, laissez-moi créer une boîte de plus. Ce que je peux faire à la place, c'est essayer de faire ce Control D. Une fois que je l'ai fait, je peux faire glisser. Et maintenant, un élément frère a été trouvé. Les deux boîtes agissent donc comme celles d'une sœur, alors que la mère de ces deux boîtes est ma grande boîte rectangulaire. Maintenant, si j'essaie de les aligner, si j'essayais de sélectionner tout cela et si j'essaie de les aligner à gauche, vous pouvez voir que tout cela et si j'essaie de les aligner à gauche, mes deux cases, et cette boîte sont maintenant alignées sur le côté le plus à gauche par rapport à mon axe X. C'est parce que mon parent agit par rapport à mon élément parent. Si j'essaie de sélectionner à nouveau tout cela, maintenant si j'essaie de l'aligner sur le côté le plus à droite, que se passera-t-il dans ce cas ? Vous pouvez voir que cela correspond à mon élément parent, non à ce que j'espérais réellement. Je m'attendais à ce que cet Euro, mes frères et sœurs alignent du côté le plus à droite par rapport au cadre. Mais maintenant, cela se produit en ce qui concerne mon élément parent, car ils se situent maintenant sous cette hiérarchie. Ça va ? Si je veux les aligner dans l'univers, ces centres horizontaux, alors vous pouvez voir qu'ils s'alignent au centre. Je peux même changer la couleur pour que vous puissiez voir exactement où se trouvent mes boîtes. Je peux donc lui donner une couleur rouge, même si c'est la même couleur rouge. Vous pouvez maintenant voir qu'ils sont tous deux alignés dans la partie la plus centrale. Correct. De même, j'ai ce texte Figma dans ma boîte rectangulaire. Maintenant, si j'essaie de sélectionner ceci et si je veux les aligner, disons que je veux aligner mon texte Figma en bas. Ma boîte ne bouge nulle part ailleurs. Les boîtes se trouvent exactement à la même position. Ce qui bouge, c'est ma zone de texte, mon élément de texte. Hein ? Maintenant, il a été aligné sur la partie la plus basse. Si je veux l'aligner au centre par rapport à l'axe y, je peux sélectionner cet élément particulier si je veux qu'il soit en haut par rapport à l'axe y, je peux le sélectionner. Si je veux qu'il soit aligné à droite, vous pouvez voir que cela se produit par rapport à x. Ainsi, lorsque vous essayez de l' aligner à gauche ou à droite, cela se produira par rapport à l'axe X, mais vous devez essayer d' aligner votre haut ou votre bas. Cela peut se produire dans les deux sens, XOR et. D'accord ? C'est donc à cela que servent vos éléments parent et enfant, et c'est pourquoi il est important pour nous comprendre comment les couches sont réellement formées, comment se forme la hiérarchie. Ça va ? Même si vous n'avez pas formé de groupe ici, vous essayez de les aligner dans un format de groupe, mais ce n'est pas un groupe. Vous venez de sélectionner tout cela. Et Figma comprend automatiquement qu'il s'agit désormais d'un groupe. Permettez-moi de vous donner un autre exemple. Dans mon cadre, est-ce que j' ai des boîtes différentes ? Vous pouvez voir que la taille de mes boîtes est exactement la même. L'alignement est assez différent. Et si je voulais les aligner et les regrouper manière à ce qu'ils forment un clavier numérique ? Vous connaissez la structure de notre clavier numérique. Donc, ce que je peux faire à la place, c' est simplement faire glisser le tout et sélectionner tous ces éléments. Vous pouvez maintenant voir en bas à droite qu'une fois que j'ai déplacé mon curseur ici, j'ai la possibilité d'aligner mes cases de telle sorte qu' forment un clavier numérique. Ou sa structure sera telle qu'elle sera alignée avec un espacement approprié, un alignement approprié, etc. Donc, une fois que j'ai cliqué dessus , vous pouvez voir la première case, la case numéro un. Vous pouvez le voir maintenant de telle sorte qu' il appartient désormais à l'extrême gauche par rapport à l'axe X et à la position la plus haute par rapport à l'axe Y. La deuxième case se trouve maintenant à la position la plus haute, mais elle est alignée au centre par rapport à l'axe X, non pas sur l'axe Y mais sur l'axe X. Alors que cet élément est aligné au centre par rapport à l'axe y et également à l'atome central par rapport à l'axe des abscisses. C'est ainsi qu'il a pu le faire. Et ce que j'ai fait tout à l'heure n' était rien d'autre que la capacité de ranger. Vous pouvez voir que nous avons également une touche de raccourci pour ce faire. Vous pouvez maintenir les touches Alt, Shift et D enfoncées pour tout ranger. Sinon, si vous voulez qu'ils soient répartis, espacés horizontalement, vous pouvez voir à quoi cela ressemblera si vous voulez qu'ils aient un espacement vertical. C'est à ça que ça va ressembler, non ? Maintenant. Bien que nous aborderons les grilles et toute cette section plus tard. Vous pouvez voir que nous avons quelques reflets roses. À quoi cela sert-il et en quoi cela va-t-il nous aider ? Disons maintenant que j'ai cet espace rose, l'espace qui reste entre ces deux cases. Si je développe cela, vous verrez qu'il reste autant d'espace, soit la valeur de 08, soit la valeur de 08, entre ma case 1 et la case 2. De même entre la case 1, la case 3, la case 4 et la case phi et ainsi de suite. Comme je laisse exactement un espace entier, je peux également le faire à l' horizontale. Vous pouvez voir que je peux leur laisser exactement le même espace que celui que je souhaite. Ça va ? Je peux même, vous savez, choisir des cases particulières lesquelles je ne veux pas qu'elles soient alignées. Je peux simplement tenir cette boîte en particulier et modifier son alignement. Donc oui, c'est à peu près tout, à propos de vos alignements et de votre distribution. Une chose à retenir est donc que Figma essaiera toujours d'aligner la couche sur son élément parent. Il peut s'agir de votre groupe, d'un cadre ou contenant le cadre du composant. C'est donc ce dont vous devez vous souvenir. Et sur la base de ces connaissances, vous serez en mesure de créer magnifiques designs pour votre site Web ou vos applications. 7. (6) Système de grille: Salut à tous, bienvenue sur une autre vidéo. Dans ce didacticiel vidéo, nous allons découvrir le système de grille de Figma. Donc, tous ceux qui sont familiarisés avec le développement Web doivent tous connaître marges des boîtes flexibles, le rembourrage, la disposition en grille dans les aspects du développement Web, parce que nous avons appris le CSS, même si vous n'avez pas regardé mon cours, je suis presque sûr que tous les cours ou cours auxquels vous devez être inscrit en matière de développement Web, vous devez avoir en savoir plus sur votre système de réseau. Le système de grille reste donc à peu près le même dans Figma. Alors, qu'est-ce que cela signifie et pourquoi l'utilisons-nous ? Donc, en gros, nous utilisons le système de grille pour créer notre application, ou plutôt, je dois dire, site Web et l'application Android ne seraient pas aussi réactifs. Le site Web doit absolument être réactif. Responsive signifie essentiellement que, disons que cet ordinateur portable que j' utilise actuellement dispose d'un écran de 15,6 pouces. Et si vous essayez d' accéder à ce site Web via un appareil mobile ? Maintenant, les appareils mobiles n' ont généralement pas d'écrans plus grands, n'est-ce pas ? Ils se situent généralement dans un rapport de six à neuf. Et la taille de l'appareil est assez petite par rapport aux écrans de votre ordinateur portable, c'est vrai. Alors, là-bas, à quoi ressemblerait votre site Web ? Eh bien, certaines parties seront coupées ou seules certaines choses seront affichées et certaines choses seront cachées. Que se passera-t-il dans ce cas ? En général, si vous ouvrez simplement votre téléphone et recherchez l'un des sites Web, voyez-vous tout cela ? Oui, bien sûr, tu fais tout ça. Très bien. C'est parce que le site Web auquel vous accédez est réactif. Ainsi, tout site Web que vous essayez de créer ou auquel vous essayez d'accéder doit être réactif, car à l'heure actuelle , il existe de nombreux appareils différents , pas seulement vos smartphones , mais aussi vos tablettes ordinateurs portables, ordinateurs de bureau , montres connectées, téléphones portables. Ces différents appareils ont donc écrans différents et, selon ce site Web, ils devraient accueillir le contenu en fonction de la taille de l'appareil. C'est pour cette raison que nous avons le système de réseau. À l'aide du système de grille, vous comprendrez comment je peux redimensionner les éléments de ma page Web afin qu'elle s'adapte parfaitement à cette taille particulière de l'appareil. Donc, comme vous pouvez le voir, j'ai créé un cadre qui ne correspond pas taille d'un MacBook Pro 16 pouces. Et assurez-vous d'avoir activé ces mises en page en grille. Assurez-vous simplement que vous pouvez voir les grilles de mise en page. Sinon, même si vous avez sélectionné les grilles, vous ne pourrez peut-être pas les voir simplement parce que vous avez masqué cette partie. Assurez-vous donc d' avoir sélectionné cette chose. Cliquez donc simplement sur cette icône plus et vous pouvez voir que la grille a été formée. Maintenant, cette grille est en colonne et en ligne. Et si vous vouliez simplement afficher les colonnes, la grille des colonnes ? Vous ne pourrez donc voir que les colonnes. Maintenant, l'espacement entre ces deux colonnes, cette colonne et cette colonne, l'espace dont vous disposez, l' espace blanc que vous avez s' appelle Godot. La gouttière est l'espace entre vos colonnes ou même vos rangées. Si je souhaite afficher sous forme de ligne, vous pouvez également le faire. Et si vous souhaitez laisser de l'espace à partir de votre cadre ? Lorsque votre colonne commence réellement, une ligne commence réellement, c'est votre marge. Donc, si je dis que la marge doit être d'environ 50 pixels. Tout ce qui se trouve ici, qu'il s'agisse de la marge ou rayon de votre bordure, du rayon de vos coins, de la taille de la boîte, etc. , est au format pixels. Il existe différentes unités, comme vos pixels. En CSS, nous avons différentes unités comme vos pixels. Nous avons, nous avons de la RAM EM, nous avons des pourcentages. Donc, dans Figma, pour simplifier les choses, nous n'avons qu'un format de pixels suffisant. Assurez-vous donc que, quoi que vous saisissiez, vous avez une unité de pixels dans la mine. Ça va ? Donc, si je saisis 50, pour que vous puissiez voir qu' il reste de la place , d' accord, maintenant, si je veux également ajuster la taille de la gouttière, je peux le faire. Également. Disons que je veux que la taille de la gouttière soit de 30 pixels, alors vous pouvez voir que la taille de la colonne a maintenant été réduite. Si je veux que le nombre de colonnes soit augmenté à, disons, dix, alors vous pouvez voir que cela n'a aucun sens. Il peut maintenant contenir dix colonnes différentes à l'intérieur de notre cadre. Maintenant, à l'aide de cette disposition de vos colonnes, vous pouvez organiser vos éléments manière à laisser un espace spécifié entre ces éléments. Disons que si je crée une boîte rectangulaire ici, d'accord ? Et si je fais la même chose ici, vous pouvez voir que cela laisse 42 pixels d' espace entre ces différentes cases. Ça va ? C'est donc ma barre d'espace, si tu veux vraiment. Et d'ailleurs, si vous pouvez le voir, si je sélectionne ma case rectangulaire, vous verrez dans la section humide, concentrez-vous sur le panneau des propriétés de conception. À l'intérieur de cette largeur, W représente cela, h représente la hauteur. C'est la dimension au format pixels, d'accord, 124 x 78. Et cette position x et y indique qu'il reste 62 pixels d'espace à partir de mon cadre. Si j'essaie de déplacer cette case vers mon axe X, je devrais plutôt dire, alors vous pouvez voir la valeur de l'axe X diminuer à 13. Au départ, c' était autour de 62, maintenant c'est environ 13. Très bien, maintenant, vers 13 heures. Si je le déplace vers le haut, vous pouvez voir la valeur de mon Y changer. Donc, cet espace, 47, est l'espace à partir de la pilule supérieure où commence ma boîte. C'est donc ma position Y et voici ma position x. Ça va ? C'est ainsi que vous serez en mesure de créer un design réactif. Si vous voulez réellement savoir combien d'espace il reste à partir d'ici, d'ici à aujourd'hui. À partir de ce point jusqu'à présent, vous pouvez utiliser les règles. Revenez donc ici et sélectionnez les règles. Vous disposez également d'une touche de raccourci, Shift R, qui permet d'activer les règles dans votre projet. Alors, que vais-je faire maintenant ? Je peux, en fait, créer le centre. Je peux cliquer sur tout le cadre et apporter ma règle. Vous pouvez donc voir que la règle est en train de se placer, qu' elle a été placée ici. Maintenant, si je clique ici, vous pouvez voir 62 est la position à partir de mon y. Et si je déplace ma règle, si je déplace ma règle, vous verrez qu'elle affichera également la valeur 47. Permettez-moi de cliquer à nouveau sur ma règle. Pourquoi n'affiche-t-il pas la position de l'axe X. Donc, si je veux vraiment apporter une règle qui mesurera à partir de l'axe X ou de l'horizontale. Je vais juste devoir faire glisser le curseur du haut jusqu'à l'endroit où je veux placer ma règle. Vous pouvez donc voir qu'il est maintenant dans cette position particulière. Ça va ? C'est donc ce que vos dirigeants vous permettront de faire. C'est donc à peu près tout. Et quelles sont les choses qui nous restent ? Au fait, si vous voulez vraiment jeter un œil à toutes les différentes touches de raccourci que nous avons pour Figma. Vous pouvez simplement cliquer ici et accéder à l'aide d'un compte. Vous pouvez simplement cliquer sur ces raccourcis clavier. Sinon, vous pouvez simplement maintenir Control Shift et le bouton en forme de point d'interrogation. Une fois que vous aurez cliqué dessus , vous trouverez les différentes touches de raccourci pour zoomer , naviguer entre les différents outils, sélectionner certains éléments et tout ça. Vous pouvez donc simplement voir toutes ces différentes touches de raccourci que vous avez dans Figma. 8. (7) Théorie des couleurs: Très bien les gars, revenez sur une autre vidéo. Dans cette leçon vidéo, je vais essayer de tout expliquer sur la théorie des couleurs. Et j'ai essayé d'expliquer toutes les informations critiques sans compliquer les choses pour vous tous. Maintenant, en matière de théorie des couleurs, il existe de nombreuses informations sur Internet. Si vous avez déjà travaillé sur un quelconque type de design, vous connaissez probablement les bases de la théorie des couleurs. Mais si ce n'est pas le cas, vous avez peut-être juste besoin d'un petit rafraîchissement. Alors, sans perdre de temps, voyons comment ça se passe. Alors, tout d'abord, examinons certains des types de couleurs. La première est votre couleur principale. Maintenant, la couleur primaire implique vos couleurs rouge, jaune et bleu. En mélangeant ces couleurs, nous obtenons nos couleurs secondaires, qui sont le vert, que nous obtenons lorsque vous mélangez le bleu et le jaune, nous obtenons l'orange. Lorsque nous mélangeons le jaune et le rouge, nous obtenons du violet ou du violet lorsque nous mélangeons du bleu et du rouge. Maintenant, en mélangeant vos couleurs primaires et secondaires, vous obtenez les couleurs tertiaires. Lorsque vous mélangez le bleu et le vert, vous obtenez du bleu-vert. Lorsque vous mélangez le vert et le jaune, vous obtenez un vert jaune. Le vert est en fait votre couleur secondaire, tandis que le jaune est une couleur primaire. Ainsi, lorsque vous combinez ces deux couleurs, vous obtenez une couleur tertiaire, qui est une couleur jaune et verte. Examinons certaines des terminologies de couleur de Figma. Alors je vais juste enfiler ma Figma. Maintenant, je vais créer une boîte rectangulaire de la même taille. Et je vais vous expliquer à propos de nous. Alors, que devez-vous avoir entendu parler de Q à de nombreuses reprises lorsque vous utilisez peut-être des outils de retouche photo tels que Lightroom ou Canva. Donc, u est juste votre couleur lorsque vous choisissez la couleur ici, c'est votre teinte. N'utilisez qu'une couleur. Donc, si vous sélectionnez ce curseur, vous le pointez vers la gauche. Cela va dire que vous avez la possibilité de choisir entre différentes nuances de rouge. Ainsi, la forme la plus pure de n'importe quelle couleur est essentiellement un vous. Ça va ? Donc, si je fais glisser mon curseur de ce côté vers peut-être ce côté, disons. Je vais donc obtenir une couleur bleue saturée appropriée. Si je le fais glisser vers ce côté, je vais passer au vert. Si je le fais glisser vers ce côté, je vais obtenir une couleur rose ou violette, non ? Voilà donc mon point de vue. Parlons des teintes, des nuances et des tons. Maintenant, qu'en est-il des dizaines ? Très bien, imaginons que la couleur de cette forme particulière soit à peu près bleue. Ça va ? Maintenant, je vais créer une réplique exacte de cette boîte avec une couleur blanche, n'est-ce pas ? Couleur blanche avec une opacité d'environ 40 %. J'ai donc simplement modifié l'opacité en appuyant sur la touche F4 de mon clavier. Et maintenant, vous pouvez voir que l'opacité de ma forme a été modifiée à 40 %. Ça va ? Maintenant, si je déplace cette forme par-dessus cette forme, vous pouvez voir que la couleur de la boîte a maintenant été changée en bleu clair, n'est-ce pas ? Donc, dix, c'est essentiellement lorsque vous ajoutez un blanc à une couleur spécifique, c'est votre tendon. Très bien, laissez-moi créer une autre boîte pour que vous puissiez voir la différence de couleur. Donc, la case du bas, cette boîte est la forme la plus pure de ma couleur, alors que celle-ci est la teinte de cette couleur particulière. C'est donc ce que j'ai pu réaliser avec l'aide de Tinder, non ? Qu'en est-il des lunettes de soleil ? Alors, imaginez qu'au lieu que cette boîte soit noire au lieu d'être blanche, vous pouvez voir qu'elle est de couleur noire. Si je le fais glisser sur cette case en particulier , d'accord, j'obtiendrai une couleur bleu plus foncé. J'ai pu obtenir cette couleur particulière parce que j'ajoute du noir à une couleur spécifique. Vous pouvez voir la nette différence entre ces deux couleurs. Celui-ci a l'air bien plus ennuyeux, non ? Il a une teinte plus foncée. Alors qu'il s'agit d'un format plus pur et plus naturel. Parlons des tons. Maintenant. Le ton, c'est lorsque vous mélangez votre couleur avec une couleur grise. Permettez-moi de sélectionner cette couleur, ou plutôt cette case particulière avec le gris, n'est-ce pas ? C'est gris, non ? Si je fais glisser telle ou telle case en particulier, vous verrez que c'est à cela que ressemble ma forme. Hein ? Maintenant. Si je veux faire correspondre cette couleur de cette boîte à cette boîte, je devrai déplacer mon curseur. Je vais devoir déplacer mon curseur vers la diagonale. Cela signifie qu'en bas à gauche, en bas à gauche, je pourrai obtenir cette couleur exacte. Vous pouvez voir qu'une fois que j'ai déplacé mon curseur, le curseur, je suis capable de récupérer exactement la même couleur. Un peu pareil. Oui, vous pouvez voir que le même délai est possible car maintenant j'ai ajouté du gris à ma couleur naturelle. Si je veux assombrir un peu cette forme, non ? Si je veux assombrir un peu cette couleur ou y ajouter de l'ombre, je dois faire glisser mon curseur vers le bas à droite. Cela va me donner une teinte plus foncée et ajouter plus de teinte à ma couleur. Si je veux en ajouter d'autres, je devrai déplacer mon curseur vers le haut à gauche. C'est vrai. C'est ainsi que je pourrai m'occuper de cette couleur. Parlons de saturation. Maintenant, la saturation est une autre terminologie qui est assez souvent utilisée lorsque nous parlons de couleurs et de théorie des couleurs. Cela nous indique essentiellement à quel point elle pourrait être riche. Imaginez donc que c'est la forme la plus pure de ma couleur. Vous pouvez donc voir la quantité de bleu ajoutée dans cette boîte particulière. Ce niveau de saturation est donc de 100 %, ou vous pouvez voir que la saturation est au maximum. Si j'y ajoute un peu de matité. Vous pouvez voir que cette couleur particulière n' est pas saturée. C'est fait. parle de luminosité, ce qui contraste avec cette affirmation particulière de saturation, lorsque la couleur est plus proche du blanc ou du noir sur une échelle. Supposons que si je déplace ma couleur vers la droite, vous pouvez voir que la couleur bleue est très brillante. Si je déplace mon curseur vers le bas, vous pouvez voir que la couleur n' est pas très claire. C'est ainsi que je peux dire que, vous savez, cette couleur en particulier ne se trouve pas chez Albright. En parlant de température de couleur, nous avons soit des couleurs froides, soit des couleurs chaudes. Les couleurs froides sont les couleurs que nous avons qui plaisent ou qui plaisent à tous, à qui que ce soit, ce sont le bleu, le vert et le violet. En parlant de couleurs plus chaudes, on leur donne la même terminologie parce qu'elles sont assez chaudes pour nos yeux. Les couleurs incluent donc le rouge, le jaune et l'orange. Si je déplace mon curseur sur l'UE, qui se trouve sur le côté gauche, vous verrez que je vais obtenir la température la plus chaude, n'est-ce pas ? Si je souhaite modifier la température de ma couleur trop à chaud, je glisserai vers le chaud. Et si je veux qu'il fasse plus frais, je vais le faire glisser vers la droite. Ce sont les couleurs les plus cool. Voici donc certaines des terminologies. Parlons de certains modèles de couleurs que nous avons. Parlons du RGB. RGB est un modèle de couleur très populaire que nous utilisons depuis que nous utilisons depuis longtemps, même en CSS. Chaque fois que nous devons attribuer des couleurs à nos éléments, nous utilisons généralement les instructions RGB ou l'unité RGB. RGB signifie donc rouge, vert et bleu. Donc, tous ces joueurs sur PC, fascinés par les bandes RGB et les lumières RGB. RGB signifie rouge, vert et bleu. Et il utilise le mélange additif de lumière pour créer différentes couleurs. Désormais, tous nos écrans d'affichage ont des lumières LED différentes. Maintenant, ces lumières LED ont trois intensités. Intensité du rouge, intensité du vert et intensité du bleu. Maintenant, en fonction de ces intensités de différentes lumières, vous pouvez voir toutes les couleurs différentes. Ainsi, même sur l'écran de mon ordinateur portable, j'ai de minuscules transistors, des diodes et, cumulativement, ils forment ces différentes couleurs. Si je dis que je veux former une couleur noire, l'intensité de mes diodes rouges, vertes et bleues serait minimale ou minimale. Alors maintenant, puisque l'intensité n' est pas fournie, la couleur serait naturellement noire. Mais si je veux que la couleur soit blanche, que toutes les lumières soient rouges, vertes et bleues, l'intensité serait trop élevée. Cela signifie que les trois couleurs grandissent à leur capacité maximale. Et maintenant, j'obtiendrais la couleur blanche. Ainsi, lorsque vous superposez le rouge, le vert et le bleu à pleine luminosité, nous obtenons du blanc. Et c'est ainsi que fonctionnent nos écrans, pas seulement nos écrans, mais même ma souris ici. Vous pouvez voir cette souris de jeu. Il est capable de changer de couleur. Laisse-moi juste te montrer. Ce sont donc des couleurs différentes sur ma souris. Il est donc capable de récupérer ces différentes couleurs car il possède différentes diodes lumineuses, des diodes LED. Maintenant, ces bandes LED n' ont plus d'autres couleurs. Ils ont juste du rouge, du vert et du bleu, en fonction de l'intensité de la lumière, ils peuvent prendre différentes couleurs. C'est ainsi que fonctionne le modèle RGB. Laissez-moi vous montrer comment travailler avec le modèle RGB dans Figma. Donc, comme vous pouvez le voir ici, si je choisis entre hexadécimal et RGB, j'ai la possibilité ou la possibilité d'ajouter les valeurs. Je peux maintenant ajouter les valeurs comprises entre 0 et 255. La valeur de 55 est la quantité maximale que je peux donner au rouge, au vert ou au bleu. Maintenant, la première unité ou la première valeur que je vais saisir représentera la couleur rouge. La deuxième valeur représente le vert et la troisième valeur représente w. Puisque dans ce cas, j' ai une couleur plus froide. Je n'ai aucune couleur rouge. C'est pourquoi nous avons des zéros en rouge. Comme vous pouvez le voir, comme cette couleur est plus orientée vers le bleu, vous pouvez voir que la saturation du bleu est maximale, soit 255, bien qu' il y ait une certaine nuance, nous avons aussi du vert. C'est la raison pour laquelle nous obtenons ce ton plus froid de cette couleur particulière. Si je veux le remplacer par, disons, en rouge, alors je mettrai à 55, 55, les autres à zéro. C'est ainsi que je pourrai obtenir ta couleur rouge. Très bien, c'est mon modèle de couleur RGB. Parlons également des différents modèles de couleurs. Deuxièmement, nous avons le CMYK. Cmyk représente le cyan, le magenta, le jaune, noir et, pour créer des couleurs, ce modèle utilise ce que l' on appelle le mélange soustractif. Maintenant, nous n'allons pas entrer dans les détails modèle colorimétrique CMJN, car il est principalement utilisé à des fins d'impression Nous ne l'utilisons généralement pas dans Figma ou dans aucun des outils de conception, que ce soit pour la conception d'une application, la conception de sites Web , la création de contenu , nous n' utilisons pas le modèle CMJN. Nous utilisons généralement le RGB et d'autres modèles dont je vais parler. Un autre est votre HSB. Maintenant, HSB, cela signifie teinte, saturation et luminosité. J'ai déjà parlé de ces trois terminologies de couleurs. Néanmoins, si vous n'êtes pas clair à ce sujet, revenez à cette partie et vous pourrez vous y référer à nouveau. Maintenant, ce modèle de couleur particulier utilise un mélange de ces trois attributs pour créer des couleurs différentes. Laissez-moi vous montrer Figma. Donc, au lieu du RGB, si je choisis ce HSB, que se passera-t-il ? Vous pouvez voir que la valeur maximale que nous avons est de 100 et la valeur la plus faible que nous pouvons obtenir est zéro. Donc, si je le règle sur 100, vous pouvez voir que l'UE est à 100, la saturation est également à 100 et que la luminosité est également réglée sur 100. Si je règle la luminosité à zéro, je l'obtiendrai en noir. Pourquoi ça ? Parce qu'il n'y a aucune luminosité. La couleur est complètement terminée. C'est noir, non ? Si je règle la saturation à 50 %, voyons ce qui se passe. Vous pouvez toujours voir qu'il fait noir car la luminosité est réglée sur zéro. Si je règle la luminosité sur 50, ce sera quelque part ici, n'est-ce pas ? Si je règle la teinte sur 50, disons, cela me donnera cette couleur ocre particulière, n'est-ce pas ? C'est ainsi qu'il peut me donner saturation et de la luminosité. valeur dépend donc de l'endroit où vous placez votre curseur sur cette échelle particulière. C'est ce que vous pourriez dire, c'est que nous allons parler d'autres modèles. L'hexadécimal est donc un autre modèle de couleur que nous utilisons. hexadécimal est un moyen très convivial d'afficher vos couleurs RGB, car les deux premières lettres ou chiffres font référence à la lecture. Les deux rivières suivantes passent au vert et les deux dernières au bleu. Maintenant, toutes les personnes familiarisées avec CSS utilisent peut-être l'hexadécimal. Maintenant, en général, en CSS, nous utilisons le symbole de hachage avant d'écrire nos valeurs hexadécimales. Mais à Figma, nous n'avons pas besoin de le faire. Donc, si je reviens à ma Figma, vous pouvez voir que je peux également sélectionner la valeur hexadécimale. Maintenant que nous sommes là, comme vous pouvez le voir, nous avons 40 AD et la valeur 40 représente mon rouge, AT représente mon vert et le quatre représente mon bleu. Maintenant, pourquoi nous l'avons-nous fait savoir via, parce que si vous avez découvert les valeurs hexadécimales, toutes les valeurs qui sont à deux chiffres, comme si vous aviez 10, 111-213-1415. Ils sont représentés sous forme de treillis. Sinon, 0-9, nous avons des chiffres. La lettre a représente donc la valeur dix, car en valeur hexadécimale, nous ne pouvons pas écrire dix, sinon elle sera représentée comme un NCO. C'est pourquoi nous avons les lettres a, B et ainsi de suite. Ce sont donc mes valeurs hexadécimales, non ? Et si je veux remplacer cela par, disons, cette valeur particulière, vous pouvez voir que la valeur hexadécimale change également. Récapitulons donc rapidement ce que nous avons appris au cours de cette session. Il existe donc trois couleurs primaires, le rouge, le jaune et le bleu. Ils représentent les éléments de base de toutes les autres couleurs. Les couleurs secondaires sont obtenues en mélangeant les couleurs primaires, comme le rouge et le jaune pour obtenir l'orange. Si nous mélangeons le rouge et le bleu, nous obtiendrons du violet ou du violet. Si nous mélangeons le bleu et le jaune, nous obtiendrons du vert. Les couleurs tertiaires fonctionnent en mélangeant des couleurs primaires et secondaires. Vous êtes la famille dominante d'une couleur donnée. Le mode couleur CMJN utilise les couleurs cyan, magenta, jaune et noir, sont principalement utilisées à des fins d'impression. C'est pourquoi nous n'incorporons pas ce modèle de couleur particulier à Figma ou à tout autre outil de conception. Enfin, nous avons des modèles RGB et HSB qui sont utilisés dans les médias numériques. Et le format de couleur hexadécimal est moyen plus convivial de représenter les couleurs RGB. Donc oui, tout cela était de mon côté pour cette conférence en particulier. Dans la prochaine conférence, nous allons découvrir harmonies de couleurs, la psychologie de l'utilisation de différentes couleurs et les différents outils que nous pouvons utiliser pour nous aider dans la création de nos projets. 9. (8) Harmonies et psychologie des couleurs: Salut à tous, bienvenue sur une autre vidéo. Dans cette conférence vidéo, nous allons en apprendre davantage sur les harmonies de couleurs et la psychologie de l'utilisation de différentes couleurs. Maintenant, lorsque vous travaillez avec différentes couleurs, cela peut être un peu intimidant, surtout pour les débutants, car vous connaissez la théorie des couleurs, mais vous ne savez pas comment intégrer différentes couleurs dans votre projet spécifique. C'est la raison pour laquelle nous avons des harmonies de couleurs, une palette de couleurs et la psychologie de l'utilisation de différentes couleurs. Maintenant, prenons l'exemple de ce site Web de formule 1. Maintenant, comment est née la formule lorsqu'elle a eu l'idée d' utiliser la couleur rouge dans leur projet, sur leur site Web. Eh bien, il n'existe pas d'ensemble de règles en tant que tel lorsque vous utilisez des couleurs différentes pour votre projet. Mais il existe certaines directives qui vous aideront à choisir une couleur spécifique pour votre projet. Donc, puisqu'ils ont utilisé le rouge, le rouge est essentiellement la couleur de la passion. Il est utilisé pour attirer l' attention des utilisateurs ou peut-être pour transmettre votre message au public. La Formule 1 essaie donc de montrer l'exemple en disant qu'il existe tellement de pilotes aux taux différents et qu'elle veut montrer l'exemple. C'est donc la raison pour laquelle ils auraient peut-être utilisé la couleur rouge à venir. Nous avons le site Web Digital Ocean. Maintenant, il utilise la couleur bleue comme couleur la plus primaire. Vous pouvez voir que sur tout ce site Web nous avons la couleur bleue, n'est-ce pas ? bleu est la couleur la plus populaire et la plus utilisée sur Internet. La plupart des sites Web et applications mobiles que vous voyez ont utilisé la couleur bleue dans leur projet. La plupart d'entre eux en fait, parce que cela transmet la confiance , l'intelligence et la sécurité. Ainsi, la majorité des marques technologiques, comme Facebook, Twitter, LinkedIn, utilisent toutes la couleur bleue. Même Digital Ocean est un slogan parce qu' il vous fournit des serveurs, n'est-ce pas ? Ils vous fournissent une application SAS. Ils vous permettent d'exécuter vos applications et sites Web sur le serveur. Prenez donc généralement des marques, utilisez généralement la couleur bleue. Les institutions financières utilisent également des couleurs bleues, comme votre Goldman Sachs. Ils utilisent la couleur. Ensuite, nous avons le jaune. Désormais, le jaune n'est utilisé que par votre industrie du divertissement et des jouets pour enfants. Pourquoi ça ? Parce que le jaune indique généralement un mouvement amusant et audacieux. C'est la couleur du soleil. C'est pourquoi cela nous apporte de la joie, du bonheur. C'est ce que font les films. C'est ce que font les séries télévisées. C'est pourquoi la couleur jaune est généralement utilisée dans l'industrie du divertissement, n'est-ce pas ? Il transmet également de l'énergie chaude. La couleur jaune est donc généralement utilisée lorsque vous traitez avec le secteur du divertissement. Ensuite, nous avons la couleur du thème vert, qui est généralement utilisée pour la nature, n'est-ce pas ? Le vert est la couleur de la nature. Il représente la santé, le bien-être et la sécurité. Ainsi, tous les sites Web qui vendent leurs suppléments, ou qui sont liés à l'industrie de la santé, industrie du fitness, à l'industrie médicale, ou qui font la promotion de produits écologiques, il serait peut-être préférable d'utiliser la couleur verte. Comme vous pouvez le constater, ils font la promotion de produits végétaliens Ils ont donc utilisé la couleur verte à venir. Nous avons la couleur orange maintenant. Les oranges sont généralement utilisées pour exprimer le bonheur, la joie et la confiance. Ainsi, puisque l'orange est une combinaison de rouge et de jaune, les oranges se forment lorsque vous mélangez le rouge et le jaune. C'est comme ça qu'on obtient de l'orange. C'est la raison pour laquelle la plupart des propriétés du jaune et du rouge se traduisent par une orange. L'orange est donc généralement utilisé par les sites de communication comme Postman. Postman est une plate-forme API, des API, une interface de programmation d'applications utilisée à des fins de communication. C'est la raison pour laquelle nous avons orange comme couleur de thème dans Postman. Disons que je souhaite créer un site Web pour mon client qui crée son propre magasin de produits végétaliens, n'est-ce pas ? son propre magasin de produits végétaliens, n'est-ce pas ? Donc, évidemment, la couleur que nous devons utiliser est le vert. Mais quelle couleur exacte ou quelle luminosité de saturation l' UE ou mon ton devraient être pour ma couleur verte. Pour découvrir ce que je peux faire, je peux simplement copier le code hexadécimal de cette couleur verte. Et je peux me rendre sur color.adobe.com. Et là-bas, dans la section de création, je peux utiliser cette roue chromatique. Maintenant, nous pouvons voir que je l' ai fait, je peux choisir différentes couleurs et la valeur hexadécimale s'affichera ici. Il affiche même les valeurs RGB. Nous pouvons maintenant utiliser différentes couleurs à partir de la roue chromatique qu'elle nous montre réellement. Vous pouvez voir qu'ils ont une couleur différente. Combien d'outils, comme votre triade analogique et monochrome, complémentaire, etc. Donc, analogue signifie essentiellement que si vous avez affaire à la couleur verte, il vous montrera les couleurs du segment vert. Si j'ai choisi le monochrome, il affichera la plage de contraste, comme le côté le plus foncé de mon vert ou le côté le plus clair du vert. Vous pouvez donc voir qu'un contraste se forme ici. Ensuite, j'ai la triade. Maintenant, j'ai voyagé. Triad nous montrera ou nous donnera des suggestions sur les différentes couleurs qui seront opposées. Cela peut donc aussi nous donner du vert. Vous pouvez également le voir dans les tons de bleu et dans les températures plus chaudes. Voilà donc ma triade. Ensuite, je fais un compliment. Maintenant, la gratuité est tout à fait le contraire. Cela nous montrera soit du vert quelques suggestions dans la direction opposée. Nous pouvons donc utiliser le vert, le violet, le rose. Ils sont gratuits. Nous proposons également des teintes composées divisées, complémentaires à double division et carrées, et nous pouvons même utiliser des couleurs personnalisées. Mais en général, en règle générale, je vous recommande toujours de vous en tenir au monochrome ou de le compléter pour développer vos sites Web ou développer vos outils de conception Figma. Nous avons donc des versions monochromes, analogues et complémentaires à utiliser dans notre projet. Vous pouvez même déplacer cette roue. Si vous le déplacez vers le centre, vous verrez que la couleur est plus claire. La couleur n'est pas si saturée. Il est plus lumineux et n'est pas saturé. Plus vous vous rapprocherez de la roue, plus elle sera saturée et plus lumineuse. Il sera plus saturé. Une fois que vous déplacez la roue, la couleur bouge également, n'est-ce pas ? Vous pouvez voir que la couleur de base change également, la couleur monochrome. Vous pouvez voir quand l' un est saturé et l' autre moins saturé. Ce sont donc différentes couleurs que nous pouvons utiliser pour développer notre projet Figma, n'est-ce pas ? Récapitulons rapidement ce que nous avons appris tout au long de cette conférence. Tout d'abord, les couleurs peuvent avoir des significations différentes selon les scénarios ou les cultures. n'existe donc ensemble de règles spécifiques que vous pouvez utiliser Read uniquement pour exprimer votre passion ou pour attirer l'attention de vos spectateurs. Cela dépend entièrement du type de projet que vous utilisez. Mais juste pour maintenir une ligne directrice, je vous ai donné différents exemples de sites Web où ils ont utilisé ces différentes couleurs. Désormais, les harmonies de couleurs vous permettent de créer facilement une palette de couleurs. C'est la raison pour laquelle nous avons le concept d'harmonies de couleurs. Une palette de couleurs complémentaire vous donnera le plus de contraste. C'est ce que nous avons vu dans la palette de couleurs d'Adobe, n'est-ce pas ? Alors qu'un monochrome vous donnera le moins de contraste. L'outil Adobe Color est idéal pour explorer des thèmes de couleurs ou pour créer votre propre couleur. Donc, oui, c'était à peu près entièrement de mon côté. Dans les prochaines conférences, vous apprendrez à créer vos propres couleurs, à créer réellement différentes couleurs linéaires, des couleurs de remplissage unies. Et nous allons également explorer la partie topographique. 10. (9) Mode de remplissage en couleurs: Salut à tous, bienvenue sur une autre vidéo. Dans cette conférence vidéo, nous allons découvrir le mode film de Figma. Et nous examinerons également la section des couches que nous avons dans Figma. Alors, qu'est-ce que Fillmore exactement ? Nous avons donc découvert la théorie des couleurs. Nous n'avons pas parlé d'harmonies de couleurs, mais il reste encore quelques points à aborder à propos des couleurs dans Figma. donc pas seulement de Figma, mais aussi de la conception de choses. Donc, comme vous pouvez le voir, j'ai cette boîte en particulier, mais de couleur verte, non ? Vous pouvez maintenant voir qu'une fois que j'ai cliqué sur ce fond dans le mode couleur, vous verrez que ce mode de film en particulier est en couleur unie. Solide signifie essentiellement que la couleur n'aura qu'une seule couleur, cette boîte d'éléments en particulier n' aura qu'une seule couleur. C'est ma couleur unie. Si je change cela en linéaire, que se passera-t-il ? J'aurai deux teintes contrastantes. Cela signifie que, d'une part, je peux avoir une couleur verte et, d'autre part, je peux avoir une couleur cyan ou une autre couleur. Permettez-moi donc de choisir une couleur verte, l'autre couleur comme péché. Et si je déplace ce point vers ce point et la deuxième couleur vers ce point, alors vous verrez que c'est ainsi qu'une teinte ou une couleur linéaire s'est formée. Deux couleurs ont été utilisées pour former cette couleur unique. C'est mon mode de filtre linéaire. Ensuite, j'ai le radial, le radial, comme vous pouvez le voir, il forme une forme circulaire, comme le soleil brille à la lumière du soleil, c'est ce que cela nous montre. Vous pouvez voir que c'est le Fillmore radial, n'est-ce pas ? Ensuite, nous avons l'angle. Cela signifie que je peux choisir cet angle ou cet angle. Sous cet angle précis uniquement, j'obtiendrai cette couleur plus foncée ou cyan, n'est-ce pas ? C'est mon mode de film angulaire. J'ai un diamant. Vous pouvez voir qu'une forme de diamant s'est formée. Hein ? Ensuite, j'ai l'image. Je peux utiliser une image ou vidéo pour créer une couleur et ainsi de suite, n'est-ce pas ? Voilà donc les différents modes que j'ai dans Figma. Parlons des couches que nous avons dans Figma. Très bien, avec cette méthode de superposition, voyons comment nous pouvons réellement créer notre propre couleur lorsque nous superposons différentes formes de couleurs différentes. Donc, ce que je vais faire, c'est créer un nouveau cadre, non ? Et je vais créer différentes formes. Ça va ? En maintenant la touche Alt enfoncée, je peux reproduire exactement la même forme. Ça va ? Ce sont donc les trois formes, et les trois formes se chevauchent. Disons que cette forme particulière a une couleur violette ou violette, n'est-ce pas ? Une couleur violette ou violette avec un peu de transparence. Celui-ci est de couleur jaune. Mettons-le en jaune. Oui. Celui-ci était cyan. Vous pouvez donc voir ces trois formes sont prêtes à signer. Maintenant, lorsque je superpose les trois formes, est-ce que j'obtiens la nouvelle couleur ? Quand le violet et le cyan se mélangent ? La partie qui se chevauche, puis-je obtenir une nouvelle couleur ? Non, je ne sais pas. Pourquoi ça ? Tout simplement parce que la manière dont les couches sont superposées, c'est un phénomène de transmission, et non de multiplication. Pour ce faire, je dois faire glisser les trois formes et définir la couche comme multipliée. Une fois que je l'aurai fait. Vous pouvez maintenant voir que lorsque cyan et le violet sont multipliés, la couleur que nous obtenons est w. Lorsque les trois couleurs se multiplient, nous obtenons du noir. Lorsque le cyan et le jaune se multiplient, nous obtenons du vert, du violet ou du rose, multiplié par du jaune, nous obtenons du rouge. Tout tournait donc autour des couleurs. Nous en avons fini avec les couleurs. présent, dans la prochaine conférence, nous allons en apprendre davantage sur la typographie et les différents textiles. 11. Modes de texte et propriétés: Très bien, passons à la typographie. Maintenant, la typographie est un concept très important dans la conception, que vous conceviez un site Web ou une application mobile. Il aurait une sorte de contenu textuel. Maintenant, lorsque vous écrivez du contenu dans un format texte, vous savez que votre contenu peut être des images, des vidéos, n'est-ce pas ? Il peut également s'agir d'un texte. Donc x a également besoin d'un certain style. Désormais, le style du texte peut être le style de police, la famille de polices, le poids de la police, la taille de la police, ainsi que l'alignement de la police. Que vous vouliez l'aligner au centre ou peut-être en haut, peut-être en bas. C'est donc tout ce que nous allons apprendre dans cette conférence. Donc, pour cela, comme vous pouvez le voir, j'ai créé un cadre à l'intérieur de celui-ci. Si je veux écrire quoi que ce soit, je dois cliquer sur cette icône dans ma barre d'outils. Ce T I peut représenter le texte. Une fois que j'ai cliqué dessus, je peux maintenant faire glisser. Je peux maintenir le bouton de la souris enfoncé et faire glisser la zone de texte. Dans cette zone de texte, je peux écrire mon texte. Disons que j'écrirai n'importe quel texte aléatoire. Encore une fois, vous voyez, nous pouvons voir ce texte. Bien que le texte soit très petit, nous pouvons l'augmenter en accédant au panneau des propriétés de conception. Dans le panneau des propriétés de conception, vous pouvez voir que je peux modifier la taille de police à, disons, 30. Cette unité de 30 est donc en pixels. Si vous ne voyez aucun autre symbole ou unité après la valeur, c'est probablement en pixels. Si vous voyez un signe de pourcentage, cela signifie que c'est en pourcentage. Si vous n'avez pas vu le format des degrés, c'est qu'il est en degrés. Si vous regardez ici dans le panneau des propriétés de conception, cette rotation particulière est définie en degrés. L'unité ici est donc le degré, alors que la taille de la police est au format n pixels. Ici, vous pouvez voir que nous avons le poids de la police. Actuellement, il est réglé sur normal. Vous pourriez même le changer en gras. Vous pouvez voir que le texte a maintenant été changé en bol. Si vous voulez qu'il soit un peu léger, vous pouvez voir à quoi ressemble notre manuel. Je vais revenir à la normale. Essayons maintenant de changer le style de notre police, mais essayons de changer la famille de polices. J'aimerais lui appliquer un style différent et je peux choisir entre différents styles. Maintenant, comment pouvons-nous nous limiter à une famille de polices particulière parmi toute cette liste ? Eh bien, pour cela, vous disposez d'autres ressources à partir desquelles vous pouvez déterminer la famille de polices que vous souhaitez utiliser. Personnellement, j'utilise Google Fonts pour vérifier quelle famille de polices conviendrait le mieux à mon design. Vous pouvez donc simplement passer au nouvel onglet, rechercher des polices Google. Une fois que vous aurez cliqué sur Google Fonts, vous verrez cette page. Je vais entrer, voir les téléphones disponibles. Une fois là-bas, vous pouvez voir que j'ai tellement de familles de polices différentes parmi lesquelles choisir. Disons que je souhaite sélectionner Roboto. Double-cliquez ici. Maintenant, vous pouvez voir que cela nous montre également à quoi cela ressemblerait si je disais que le poids de ma famille de polices est trop mince, 100, à quoi ressemblerait mon téléphone si je le changeais en métal, à quoi il ressemblerait si je disais cela comme irrégulier, etc. Disons que je veux réellement examiner mon contenu plutôt que leur contenu factice. J'aimerais créer mon propre contenu fictif pour vérifier s'il correspond à mon style ou non. Donc, pour cela, je pourrais écrire ici une partie de mon texte de prévisualisation. Disons que je veux écrire n'importe quel texte au hasard. Ça va ? Voici à quoi ressemblerait mon texte. Disons que je souhaite utiliser cette famille de polices Roboto. Je peux donc revenir à ma Figma. Je peux cliquer sur la famille de polices. Je vais devoir sélectionner l'intégralité du texte. Vous pouvez aller ici et vous pouvez simplement rechercher Roboto. Et vous pouvez voir que le style Roboto a été appliqué ici et qu'il est actuellement réglé sur normal. Et si je voulais le mettre en gras ? Voici à quoi ressemble notre texte. Et voici à quoi ressemblerait l'audace. Vous pouvez voir exactement de la même manière. Correct ? Maintenant, cette zone particulière où nous avons la valeur 35, c'est quoi cette chose ? Il s'agit essentiellement de la hauteur de ma ligne. Maintenant, que signifie essentiellement la hauteur de ligne ? Disons que j'ai aussi une autre phrase. Disons n'importe quel texte aléatoire que je tape pour tester cela. Donc, au total, j'ai tapé trois lignes. Hein ? Maintenant, la hauteur entre ces trois lignes est définie par ma hauteur de ligne. Je peux donc modifier la hauteur de la ligne à, disons, 30. Je peux donc en régler 30. Et vous pouvez voir maintenant que le texte apparaît de plus près. Et si je souhaite l'augmenter ? Je peux donc également augmenter la hauteur de la ligne. Je maintiens juste la touche fléchée vers le haut pour augmenter la hauteur de la ligne. Et maintenant, vous verrez ce changement s' appliquer à mon texte. Permettez-moi de sélectionner l'intégralité de mon texte. Je vais dépasser la hauteur de la ligne et augmenter la hauteur de la ligne. Tu peux le voir. C'est de plus en plus d'espace entre ces différentes lignes. Et si je voulais laisser un espace entre ces lettres ? Pour cela, je vais devoir utiliser l'espacement des lettres, qui se trouve ici. Vous pouvez maintenant voir qu'il utilise l'unité de pourcentage, pas l'unité de pixels mais l'unité de pourcentage. Réglons d'abord ce pourcentage à dix pour cent, puis nous essaierons de l'augmenter. Vous pouvez voir 10 %. Voilà à quoi ça ressemble. Et si je souhaite le réduire ? Vous pouvez voir l'espacement entre les lettres comme s'il s'agissait de notre format. Hein ? Qu'en est-il de cette partie ? Qu'est-ce que cela signifie ? Cela signifie essentiellement que l'espacement des paragraphes est bon, nous n'allons pas aborder l'espacement des paragraphes moment, car cela ne sera pas évident si je vous montre tout. Très bien, maintenant, laissez-moi remettre toutes ces choses dans leur état initial. Je suis en train de taper pour tester la police. Hein ? Maintenant. C'est la taille de ma zone de texte. si je souhaite ajouter un peu plus de contenu, je peux ajouter, disons qu'après cela, dans ma nouvelle ligne, je veux ajouter un numéro de ligne pour la ligne phi. Tout le texte, les lignes quatre et cinq, se trouvent en dehors de ma zone de texte. Hein ? Donc, pour cela, ce que je peux faire, je peux le modifier en fonction de cette hauteur de ligne. Cela signifie que la zone de texte s'ajustera en fonction de la hauteur de ma ligne. Maintenant, cette taille fixe signifie que jusqu'à ce point, ma zone de texte ne sera que jusqu'à ce point ma zone de texte, elle ne changera pas si j'ajoute plus de mots ou plus de lignes. Permettez-moi de vous en montrer un exemple. Disons que c'est le texte que j'ajoute en fait. Vous pouvez donc voir que la hauteur n' est pas ajustée. Même la largeur n'est pas ajustée uniquement parce que nous l'avons dit à une taille fixe. taille était donc fixe auparavant, fonction des textes que nous avions sur la ligne numéro cinq, et maintenant la boîte ne changera ni de largeur ni de hauteur. Et si je voulais modifier la largeur de notre zone de texte en fonction du texte à l'intérieur de la zone de texte. Pour cela, je vais devoir sélectionner ceci, qui est la largeur automatique. Vous pouvez maintenant voir à quoi ressemble ma zone de texte. Et si je souhaite que ce texte soit aligné au centre ? Je peux sélectionner ce bouton particulier qui alignera mon texte au centre par rapport à ma zone de texte. Si je sélectionne cette option, elle sera alignée vers la gauche par rapport à ma zone de texte. Si je sélectionne cette option, elle sera alignée vers la droite par rapport à ma zone de texte. Ceci est sélectionné, c' est-à-dire alignez-le vers le haut. Si je sélectionne cette option, elle l' alignera vers le bas, ou plutôt vers le milieu. Laissez-moi vous montrer ce que je veux dire par là. Si je choisis cette pièce et si je le souhaite, alignez-la au milieu, laissez-moi réduire la taille de la boîte suivante. Donc, pour cela, ce que je peux faire, c'est écrire, disons Lorem Ipsum. Très bien. Vous pouvez maintenant voir que la zone de texte s'ajuste en fonction des textes dont nous disposons. Cela est possible car nous avons configuré notre zone de texte pour activer la vérification automatique. Ça va ? Si j'ajoute une nouvelle ligne, vous pouvez voir qu'elle s'adapte même à sa hauteur, n'est-ce pas ? Je clique donc sur cette zone de texte et je vais faire glisser une nouvelle zone de texte. Vous pouvez maintenant voir que je suis capable d'écrire ce texte à partir du milieu. Maintenant, il aligne le texte par rapport à l' axe Y à l'intérieur de ma zone de texte. Si je sélectionne cette option pour l' aligner vers le haut, mon texte apparaît en haut par rapport à l'axe Y dans ma zone de texte. Si je sélectionne cette option vers le bas, cela signifie que mon texte est aligné vers le bas par rapport à l' axe Y à l'intérieur de ma zone de texte. Voici donc certaines des propriétés de mes polices. J'ai également une fonctionnalité supplémentaire dans mon panneau de propriétés de conception , à savoir les trois points ci-dessus. Ce sont mes paramètres de saisie. Si je clique ici, je peux prévisualiser le texte avant même d'appliquer le style à mon texte. Vous pouvez maintenant voir si je l'applique, qui est de taille fixe. Voici à quoi ressemblerait mon texte si je le mettais en hauteur automatique. Voici à quoi ressemblerait mon texte dans cette zone de texte. Si je configure ça pour automatiser. Voici à quoi pourrait ressembler l'exportation. Si je veux l'aligner sur le côté gauche, je peux le faire si je veux qu'il soit centré. Voici à quoi cela ressemblerait si je voulais être bien aligné. Voici à quoi cela ressemblerait. Et si je veux que cela soit justifié, voici à quoi cela ressemblerait. Maintenant, gardez à l'esprit que les fonctionnalités telles que l'alignement, le redimensionnement et la décoration ne sont pas les fonctionnalités telles que l'alignement, le redimensionnement et la décoration ne sont disponibles pour chaque famille de polices. Certaines familles de polices le permettent, d'autres éléments de conception, la somme ne le permet pas. Alors, gardez cela à l'esprit. Nous utilisons maintenant Roboto. C'est pourquoi cela nous permet d' avoir cet alignement justifié. Et si je changeais ce texte particulier de Roboto pour remplacer, par exemple, Poppins ? Si je le fais, vous verrez maintenant que certains styles ne sont pas disponibles. Disons quel style n' est pas disponible. Très bien, tous les styles sont disponibles. Passons aux détails. Ainsi, même l'indice et l' exposant sont disponibles. Très bien, donc oui, je parlais du fait que certains styles ne sont pas disponibles pour certaines familles de polices. Mais dans mon cas, Poppins nous permet de formater ces choses, n'est-ce pas ? Nous pouvons donc procéder à un alignement justifié, nous pouvons souligner. Nous pouvons même barrer le texte, ce qui signifie qu'une ligne traversera notre texte. Ce que je veux dire par là, c'est que disons que je le suis, laissez-moi le dire ainsi. Très bien. Laissez-moi écrire des mots qui auraient du sens, comme du texte aléatoire. Vous pouvez voir que le texte est souligné. Et si je ne voulais pas que ce soit souligné, mais plutôt que ce soit biffé. Ensuite, vous pouvez voir qu'une ligne barrée a traversé notre texte. Et si c'est ce que je veux ? Mais aucune, aucune décoration en tant que telle. Vous pouvez donc même le faire. Maintenant, si vous avez un paragraphe en retrait, vous pouvez le faire. Maintenant, que signifie le retrait d'un paragraphe ? Supposons que vous ayez dix pixels de paragraphe en retrait. Cela signifie qu'il resterait dix pixels d'espace. À partir de la zone de texte. Votre première lettre commence par vos textes, non ? Voilà donc mon paragraphe en retrait. Comme je l'ai déjà dit, l'espacement des paragraphes n' aurait aucun sens. Si je vous explique, vous vous pencherez tous là-dessus plus tard, si cela s'avère nécessaire. Nous avons également un style de liste. Disons que j'ai aussi d'autres textes. Disons un. Premier, deuxième, troisième. Ça va ? Et je vais sélectionner tout mon texte. Et je pourrais appliquer un style de liste, comme une liste à puces. Voici à quoi ressemblerait notre texte si je disais que cette liste à deux numéros comporterait des numéros, n'est-ce pas ? Si j'ai un peu d'interligne, je peux même le faire. Ensuite, nous avons quelques cas. Maintenant, les majuscules signifient que si je veux que tout mon texte soit en majuscules, toutes les lettres de mon texte seront en majuscules. Si je veux que ce soit en minuscules, toutes les lettres de mon texte seront en minuscules. Si je veux le titre en majuscule, cela signifie que chaque mot, première lettre, serait en majuscules. Il contient toutes les lettres de ce mot qui seraient en minuscules. Ensuite, nous avons cela, qui n'est pas pris en charge pour les petites capitalisations. Vous pouvez voir que la police ne prend pas en charge les petites majuscules, donc ce Poppins ne prend pas en charge ce boîtier particulier. C'est donc ce que j'avais dit précédemment. Revenons à Roboto et nous verrons si cela s'applique ou non. Vous pouvez donc maintenant appliquer ce qui est une petite majuscule forcée. Maintenant, les petites majuscules signifient essentiellement que même si toutes les lettres de votre texte sont en majuscules, leur taille est plus petite, de sorte qu'il ressemble à cela. Ce n'est pas une police si grande et si énorme, non ? C'est donc ce que signifie réellement cette première petite capitalisation. Supposons que vous ne vouliez appliquer aucun de ces cas, vous savez, alors vous pouvez simplement sélectionner celui-ci. Vous pouvez revenir à ces détails. Si vous voulez un exposant ou un indice, vous pouvez même l'écrire. Disons que vous avez ce texte quelque chose comme deux à la puissance de deux. Vous pouvez donc le mettre en exposant. Maintenant, on passe de deux à deux. Et si je voulais écrire, disons me connecter à la base dix. Je peux donc écrire le journal dix. Je peux en sélectionner dix, et je peux les ajouter en indice. Nous pouvons donc voir que c'est maintenant enregistré dans la base dix. Si vous concevez du contenu pour votre site Web, ou peut-être une application dans laquelle vous souhaitez utiliser ces expressions mathématiques ou peut-être des équations chimiques, vous pouvez utiliser Figma pour intégrer un exposant et indice à votre conception. Très bien, donc tout cela était de mon côté pour cette conférence en particulier. Dans la prochaine conférence, vous découvrirez quelle est la différence entre votre format serif et votre format sans-serif ? 12. (11) polices Serif vs sans Serif: Il y a maintenant beaucoup de confusion entre les polices avec empattement et sans empattement. Eh bien, ne vous inquiétez pas, les gars. Je ferai de mon mieux pour dissiper toute confusion. Et à la fin de cette conférence, vous serez en mesure de choisir la police parfaite pour votre design. Quelle est exactement la différence entre cette police avec empattement et sans empattement ? So Sons est un mot français, qui signifie essentiellement sans. Ainsi, comme leur nom l'indique, principale différence entre ces deux types de faces réside la présence ou l'absence d' empattement dans les lettres. Maintenant, en quoi consiste exactement ce coffre-fort ? Aussi affirmée qu'une ligne décorative ou un cône ajouté au début ou à la fin d'une lettre, qui crée de petits plans horizontaux et verticaux au sein d'un mot. En résumé, vous pouvez dire que les polices avec empattement ont ces lignes décoratives ou ces effilés, alors que les polices sans empattement n'en ont pas. Comme vous pouvez le voir ici, sans-serif n' ont pas ces traits. Examinons maintenant certaines des polices Serif les plus utilisées. Ce sont donc Times New Roman. Nous avons dans notre Microsoft Word. Times New Roman est donc une police serif couramment utilisée. Garamond est une autre police serif couramment utilisée. Ensuite, nous avons Baskerville, en Géorgie, et Courier New. Examinons certaines des polices sans empattement les plus utilisées. Helvetica, Proxima Nova, Futura et Calibri. Maintenant, que dit une police serif à propos de votre marque ? Si vous optez pour un look et une sensation traditionnels dans votre design, vous devez absolument opter pour la voie serif. Depuis, les polices serif sont largement utilisées dans les livres, les journaux et les magazines. Ils nous rappellent des thèmes plus classiques, formels et sophistiqués. Les polices Serif sont un excellent choix pour les marques qui souhaitent être considérées comme dignes de confiance, établies et fiables. Les polices serif constituent donc un excellent choix pour les entreprises plus traditionnelles telles que les cabinets d'avocats, les sociétés financières ou les compagnies d'assurance. Que dit une police sans empattement à propos de votre marque ? Les polices sans empattement visent donc davantage à jeter la tradition par la fenêtre et sont bien plus favorables à plus qu'à la sophistication. sans-empattements sont donc considérés comme plus modernes parce que, vous savez, nos modèles minimalistes offrent un look moderne. Ils sont plus simplistes. Donc, si vous voulez que votre design paraisse plus jeune et plus accessible, n'est-ce pas ? Les polices sans empattement peuvent donc sembler plus accessibles que celles proposées ici, empattement plus professionnelles. Les polices sans empattement sont donc considérées comme plus accessibles, ludiques et jeunes en raison de leur simplicité. Donc, en gros, les nouvelles entreprises, les entreprises en ligne, les entreprises technologiques utilisent ces polices sans empattement. Le logo actuel de Google utilise une police sans empattement. Plus tôt, en 2005 ou 2006, je suppose, lorsque Google était relativement nouveau par rapport à Yahoo, ils utilisaient des polices serif. C'est donc à peu près tout. J'espère que la confusion entre Serif et Sans Serif est claire et j'espère que vous savez tous quelle police utiliser pour votre design. 13. (12) Utiliser des polices personnalisées dans Figma: Très bien, voyons comment nous pouvons télécharger nos polices personnalisées et Figma. Il se peut maintenant que vous souhaitiez utiliser une sorte de famille de polices, qui n'est pas disponible dans Figma. Non, il est disponible dans Google Fonts. Alors, que faites-vous dans ce cas ? Pour vous donner un exemple, et si je voulais utiliser la famille de polices Grand Theft Auto ? Par exemple, j'ai beaucoup aimé jouer à des jeux loués, et j'aimerais utiliser cette famille de polices, mais elle n'est tout simplement pas disponible dans Figma. Disons que je souhaite appliquer le même style à cette police. Alors, comment puis-je appliquer cela ? Donc, pour cela, je vais devoir me rendre sur figma.com slash downloads. vous suffit de vous y rendre de y et de choisir la plateforme que vous utilisez. Dans mon cas, j'utilise une machine Windows, je vais donc installer ce programme d'installation Windows dans ces installateurs de polices. Cela va donc prendre un certain temps et il essaiera de télécharger l'application EXE, suffit de l'ouvrir et de l' installer sur votre système. Je vais donc l'installer. Vous pouvez voir que cela a été installé. Maintenant, je peux revenir à cette police et je peux cliquer ici pour la télécharger. Maintenant, je ne le téléchargerai plus car je l'ai déjà téléchargé sur mon système. Donc, comme vous pouvez le voir, il s'agit d'un fichier zip. Je vais donc l'extraire en utilisant 7-Zip. Vous pouvez utiliser tous les autres outils dont vous disposez, comme votre trachée ou tout autre outil de ce genre. Je ne vais pas entrer dans le détail des données. Nous avons donc maintenant cette fameuse police dot TXT. Une fois que j'ai cliqué sur ceci, ou plutôt je devrais dire ceci, ce fichier PDF à un point. Vous pouvez voir ce bouton d'installation, il suffit de cliquer dessus. La Figma téléchargera donc cette famille de polices particulière. Vous pouvez maintenant utiliser cette famille de polices dans votre Figma. Permettez-moi donc de vous ramener à Figma et je vais revenir à mon projet de test. Alors, retournons là-bas. Je vais appliquer le texte, qui est Grand Theft Auto. Appliquons le style, c' est-à-dire, si je ne me trompe pas, son prix à la baisse. Et vous pouvez le voir de la même manière. Oui Vous pouvez maintenant voir la même famille de polices a été appliquée. Par ici. Vous pouvez voir que c'est la famille de polices qui est utilisée. La même chose est appliquée ici. Permettez-moi d'augmenter la taille de la police pour qu'elle soit beaucoup plus visible. Maintenant, j'espère que vous pouvez tous constater que la même famille de polices est appliquée. 14. (13) Travailler avec des images dans Figma: Très bien, continuons avec les images dans Figma. Il existe maintenant trois manières d' importer des images dans Figma. La première et la plus importante méthode consiste à passer au-dessus de l'icône de ces formes dans la barre d'outils. Et vous pouvez sélectionner cette option qui consiste à placer une image ou une vidéo. Vous pouvez également voir les touches de raccourci, qui sont Control Shift et k. Ainsi, si vous maintenez les touches Control Shift et K enfoncées, vous devrez parcourir l'image où vous vous trouvez dans votre dossier. Et vous pouvez le sélectionner . Et vous pouvez simplement le placer où vous souhaitez le coller. Très bien, vous pouvez donc voir que c'est mon image. Cette image particulière est la miniature de mon cours de développement Web complet. Si vous souhaitez explorer les aspects du développement Web, vous devriez certainement consulter mon cours, car ce cours est axé sur le développement Web complet. Il se concentre sur le front-end ainsi que sur le back-end. Nous partons donc directement du HTML. Ensuite, nous aborderons le CSS, certains frameworks CSS tels que Bootstrap, entail et CSS. Nous examinons également JavaScript dans son intégralité. Nous couvrons également les frameworks JavaScript comme React, qui est un framework frontal. Ensuite, nous couvrons également un framework de backend, qui est NodeJS. Nous nous intéressons également à Express JS. Ensuite, nous aborderons des bases de données comme MongoDB et vous verrez également comment utiliser Git et GitHub pour télécharger vos projets. Et pas seulement les projets, mais aussi tous les sites Web qu'ils aiment télécharger. D'ailleurs, si vous souhaitez créer applications et des sites Web réels, vous devriez absolument consulter ce cours, vous devriez absolument consulter car là-bas, je fais de mon mieux pour mettre à jour le cours régulièrement en mettant en ligne des projets, des vidéos et des didacticiels sur de nouveaux frameworks. Alors assez de marketing pour mes autres cours, concentrons-nous à nouveau sur nos images et Figma. C'est donc la seule façon d' importer une image dans Figma. L'autre méthode consiste à ouvrir le dossier et à utiliser la méthode glisser-déposer pour placer l'image dans votre espace de travail Figma. Maintenant, comme vous pouvez le voir, je n'ai pas importé cette image dans mon cadre. Si je souhaite placer cette image et le cadre, je peux le faire également. Permettez-moi donc de créer un cadre de, disons, de la taille d'un bureau. Et, euh, oui, je sais où je peux placer mon image pour pouvoir utiliser le glisser-déposer ou bien je peux même utiliser les contrôles C et V. Une fois que j'ai activé Control V, vous pouvez voir que l'image a été placée dans mon cadre. Vous verrez maintenant que les images sont grandes par rapport à la taille du cadre. L'image a donc été recadrée, n'est-ce pas ? Donc, si je veux redimensionner l'image, je peux maintenir ces quatre sommets. Vous pouvez voir si vous souhaitez redimensionner l'image. Et si vous faites quelque chose comme ça, vous remarquerez que l'image n'est pas redimensionnée, mais recadrée. Alors, que faites-vous dans ce cas ? Pourquoi cela se produit-il ? Cela se produit parce que nous avons sélectionné le mouvement. Au lieu de cela, nous devrions sélectionner le bouton d'échelle. Alors laisse-moi juste annuler. Et maintenant, je vais sélectionner la méthode de mise à l'échelle ou vous pouvez simplement maintenir le bouton de votre clavier enfoncé. Et maintenant, je vais redimensionner de telle sorte que l'image ne soit en aucun cas recadrée. Vous pouvez voir que les images ne sont pas masquées. C'est plutôt avoir peur. Il a été réduit. La taille de mon image a été considérablement réduite et l'image n'est de toute façon pas masquée. Très bien, voici donc les trois façons d' importer des images dans Figma. Et si vous souhaitez placer cette image dans une forme ? Comment s'y prendre ? Supposons que je veuille placer cette image et la boîte rectangulaire. Permettez-moi donc de créer une boîte rectangulaire. Et ici, j'aimerais placer cette image en particulier. Donc, ce que je peux faire, c'est sélectionner cette case en particulier. Et à l'intérieur de moi. Nous avons découvert les champs et tout le reste dans la section des couleurs. Donc, au lieu de solide, je vais choisir Image. Une fois que je vais ici, je peux choisir mon image, qui est cette image en particulier. Maintenant, vous pouvez voir que c'est maintenant, c'est maintenant dans ma forme. Très bien, maintenant je peux même faire pivoter cette image. Donc, une fois que j'ai cliqué sur cette rotation, elle la fera pivoter de 90 degrés. Maintenant pourquoi elle, c'est l'image qui a été tournée, pas ma forme. C'est donc une chose que vous devez garder à l'esprit. Ça va ? Je peux donc le faire pivoter autant de fois que je le souhaite. Ça va ? Maintenant, vous verrez également que nous avons d'autres ajustements que je peux apporter. Je devrais plutôt le dire dans le film ou je peux même passer du mode film au mode ajustement. Une fois que j'aurai fait cela, vous verrez que la forme occupe la dimension exacte de ma boîte rectangulaire. C'est donc possible car j' ai choisi ce mode FET. Si je choisis cette option pour recadrer, je pourrai recadrer l'image telle sorte que seule cette partie de l'image soit visible. Supposons que je veuille me retirer de l'image et ne placer que le logo, qui est un logo NodeJS réactif de MongoDB Express. Donc, une fois que j'ai fini de recadrer mon image, vous pouvez simplement cliquer sur cette croix pour quitter le mode de recadrage. Et maintenant, seule cette partie de l'image est présente dans ma boîte. Très bien, nous avons également d'autres options. Je veux dire par là, disons que je sélectionne cette pièce, que j'aimerais ajuster. Cela signifie que nous devons prendre forme et augmenter la taille de ma boîte. Ça va ? Je vais augmenter la taille de ma boîte. Maintenant, je peux également faire d'autres ajustements. Par exemple, Lightroom et Photoshop vous permettent de régler d'autres réglages de vos images, tels que l'exposition, contraste, la saturation, la température, la teinte, reflets, les ombres, tout ce que vous pouvez faire dans Figma lui-même. Vous n'avez pas besoin d'utiliser un autre logiciel pour gérer la partie images. Comme vous pouvez le constater, j'ai légèrement réduit l'exposition pour que l'image apparaisse plus sombre. C'est donc mon exposition si je souhaite augmenter le contraste et vous y verrez plus de netteté et tout ça. Nous aimerions augmenter la saturation. Je peux le faire aussi. La personnalisation dépend donc de vous. Il n'existe pas de règles fixes quant à l'exposition à régler pour cette image ou contraste à définir pour cette image. Cela dépend totalement de votre cas d'utilisation de l'image avec laquelle vous travaillez. Ça va ? Et l'autre chose que je voulais montrer, c'est que même si je vais aborder cette question en détail dans la section des effets, supposons que vous souhaitiez créer un ton plus foncé ou un effet de type verre pour cette image en particulier. Et elle aimerait y appliquer un texte. Vous devez maintenant avoir vu des sites Web sur lesquels vous avez une image. Cette image possède maintenant une certaine transparence et une certaine largeur de texte teinte plus claire sont appliquées une teinte plus claire sont appliquées de telle sorte que l' image soit également visible, mais pas clairement, mais qu'une ombre des images présentes sur la page Web et du texte s'y trouve également. Laissez-moi vous montrer ce que je veux dire par là. Ensuite, sélectionnez cette image. Je peux accéder au panneau de transparence et je peux réduire la transparence. Donc, si je passe de 100 % à deux, disons 80 ou 80 %. Et vous pouvez voir que l' image est transparente. C'est bon, allons-y, ramenons-le à 100 %. Très bien, je peux utiliser l'Alt. Je peux faire glisser le pointeur vers le bas pour obtenir une copie exacte de cette forme. Et maintenant, dans le mode film, passons de l'image au solide. Cela signifie que je ne veux pas colorier une image. Donne-moi une teinte plus foncée. Et je vais choisir une transparence d'environ, disons environ 22 %. Si je reviens à cette partie. Vous pouvez maintenant voir à quoi ressemble mon image. Vous pouvez voir que c'est ainsi que mon image se révélerait. Maintenant, je peux même appliquer du texte à cette image. Disons que je veux écrire quelque chose comme MAN Stack. Je vais également augmenter la taille de la police. Augmentons donc la taille de police de ce texte. Donc, au lieu de 12, faisons 36. 36 n'est toujours pas clair. Allons-y avec 48. 48, ça a l'air bien. Changeons le style de texte en Roboto. Et je peux même changer la couleur de cette police pour, disons, le noir. Hein ? Oui, ça a l'air cool. Une pile. Tout tournait donc autour des images pour cette conférence. Encore une fois, un bref récapitulatif. Vous pouvez importer des images dans votre fichier de trois manières. La première méthode consiste à maintenir enfoncées les touches Control Shift et K du clavier. Ensuite, vous pouvez regarder le fichier que vous souhaitez importer. L'autre méthode consiste simplement à glisser-déposer l'image de votre dossier vers votre espace de travail Figma. La troisième méthode consiste à utiliser réellement les méthodes Control C et Control V. Qu'avons-nous appris ? Nous apprenons qu'il existe un moyen d' importer ou de placer votre image à l'intérieur de la forme, importe quelle forme, pas simplement un rectangle, mais plutôt, si vous avez affaire à une ellipse ou à un polygone, vous pouvez choisir le mode de remplissage et, en mode film, à l'intérieur du solide , vous pouvez passer du solide à l'image. Une fois que vous avez fait cela, vous avez également d'autres options. Vous pouvez soit recadrer cela. La dernière chose qui nous restait, c'est que je pouvais même passer de FIT à Crop. Et une fois que j'ai créé des mosaïques, cela signifie que je peux répéter les images autant de fois que je le souhaite. Supposons qu'à partir de 20 I10, réglez ce paramètre sur 25, alors vous verrez 25 %. Cela signifie essentiellement quatre fois que mon image a été répétée à l'intérieur de cette forme particulière. C'est donc mon carreau. Vous avez donc le choix entre différentes options . Si vous le remplissez, cela signifie que l'image sera placée à l'intérieur de votre forme, mais qu'elle ne sera pas ajustée en fonction des dimensions de la forme. Si vous choisissez l'ajustement, il s'adaptera en conséquence. Si vous choisissez l'autre méthode qui est le recadrage, vous devrez recadrer la partie de votre image. Si vous choisissez la vignette, vous pouvez répéter les images autant de fois que vous le souhaitez. Ensuite, vous avez les options nécessaires pour régler les réglages de l'image, tels que l'exposition, le contraste, la saturation, etc. J'ai également expliqué comment faire pivoter des images. D'accord ? Encore une fois, n'oubliez pas que chaque fois que vous faites pivoter, vous faites pivoter l' image à l'intérieur de la forme, non la forme elle-même. C'est donc une chose dont vous devez vous souvenir. Et si vous souhaitez diminuer ou augmenter la transparence de l'image, accédez simplement à cette couche et vous pourrez régler la transparence de l'image. Si vous souhaitez utiliser ce type d'effet d'ombre ou de verre, vous pouvez simplement utiliser une autre forme de couleur unie, faire apparaître sa transparence et la placer avec cette image en particulier. Ensuite, vous pouvez utiliser n'importe quel autre téléphone ou toute autre forme que vous souhaitez utiliser sur cette couche. C'est donc tout. Dans la prochaine conférence, vous découvrirez certains plug-ins que nous pouvons utiliser pour nous aider à importer des images. Et apprenez également à supprimer l'arrière-plan des images dans Figma elle-même. 15. (14) plug-in unsplash: Très bien, continuons avec les images et Figma. Maintenant, vous créez parfois une sorte de design pour votre client. Vous souhaiterez peut-être utiliser des photos d'archives. Maintenant, si vous pensez que je peux utiliser n'importe quelle photo de Google, je peux simplement rechercher n'importe quelle image que j'aimerais utiliser dans mon design pour que vous puissiez la transmettre à mon client. Eh bien, tu te trompes. Pourquoi ça ? Parfois, les images sont protégées par des droits d'auteur. Si vous utilisez à des fins commerciales, vous pouvez être confronté à des problèmes juridiques tels que des problèmes de droits d'auteur. Vous ne voulez donc pas vous mettre dans le pétrin. La meilleure façon de faire face à cette situation est télécharger des images libres de droits depuis les côtés, ce qui fournit des photographies de stock. L'un des sites les plus populaires est Unsplash. Il vous suffit donc d'aller sur unsplash.com rechercher l'image que vous recherchez. Disons que je recherche des images abstraites. Donc je peux juste y aller. Je peux rechercher n'importe laquelle des images et les télécharger. Pexels.com est un autre site Web. Le troisième est Pixabay. Et vous trouverez un certain nombre de sites Web EGN qui fourniraient des photographies d'archives. Maintenant, une façon d'importer les photos de stock dans votre projet Figma est de les télécharger à partir de ces sites Web, les localiser dans un dossier et de les importer dans votre Figma. C'est ce que nous avons appris précédemment, qu'il existe trois manières d'importer des images dans Figma. Mais n'existe-t-il pas un raccourci pour importer directement des images d'Unsplash dans votre projet Figma ? C'est ce que les plugins arrivent, entrent en scène. Le plug-in est donc essentiellement un ajout ou une extension de votre programme existant, qui fournira des fonctionnalités supplémentaires que le programme existant ne fournit pas. Vous pouvez donc télécharger n'importe quel plug-in, pas seulement le plugin Unsplash, mais aussi tout plug-in que vous souhaitez avoir dans Figma en accédant simplement à cette icône Ressources dans la barre d'outils ou sur Figma, pas seulement le plugin Unsplash, mais aussi tout plug-in que vous souhaitez avoir dans Figma en accédant simplement à cette icône Ressources dans la barre d'outils ou sur Figma, en cliquant dessus, en accédant à ces plug-ins et en recherchant le plugin que vous recherchez. Dans notre cas, puisqu'il s'agit d'images, nous aimerions télécharger le plugin Unsplash. Nous allons donc rechercher Unsplash. À l'heure actuelle. Vous pouvez voir que cela apparaît dans mon récent article, simplement parce que je l'ai déjà téléchargé sur mon compte Figma. Il suffit de cliquer dessus. Il faudra un certain temps pour l' installer et le laisser s'installer. Une fois que vous aurez fait cela, vous aurez cette option pour exécuter. Vous pouvez maintenant l'exécuter à partir ici et importer l'image, le type d'image que vous souhaitez utiliser dans votre projet. Vous pouvez donc le faire. Un autre moyen. Vous pouvez voir qu'il exécute mon plugin Unsplash. Je peux maintenant sélectionner ce résumé. Je peux l'importer. Vous pouvez voir que l'importation prendra un certain temps, et maintenant elle est importée, n'est-ce pas ? Une autre façon de télécharger ce plugin est de cliquer avec le bouton droit de la souris sur votre espace de travail Figma. Accédez à ces plug-ins et trouvez d'autres plug-ins. Une fois que vous aurez fait cela, vous trouverez Unsplash. Une autre façon d'utiliser plugin Unsplash consiste à cliquer avec le bouton droit sur votre forme ou votre cadre et à accéder à Plugins, Unsplash. Et votre plugin Unsplash s' ouvrira directement, sélectionnera un résumé ou tout autre type d' image que vous souhaitez utiliser. Et dans mon cas, j'aimerais utiliser cette image en particulier. Je vais donc juste cliquer dessus. Cela va prendre un certain temps. Et maintenant, vous pouvez voir que cette image a été chargée. Je peux même changer la couleur de la police. heure actuelle, c'est noir et l'image est également sombre, donc elle ne semble pas bonne, mais ne vous inquiétez pas. J'essaie juste de vous expliquer à tous comment utiliser ce plugin en particulier. Et maintenant, que faire si vous souhaitez importer cette image Unsplash Italy dans une forme ? Alors, comment s'y prendre ? Disons que j'ai une image rectangulaire. Permettez-moi simplement de supprimer cette image en particulier. L'annulation prend un certain temps. Maintenant, je peux créer un rectangle de cette taille. Ensuite, je peux créer un autre rectangle, disons, de cette taille. Je peux utiliser l'Alt et c'est ainsi que je peux m'en sortir, n'est-ce pas ? Ouaip. Faisons une autre copie de cette forme. Et une autre copie de cette forme. Maintenant, je veux importer les images de cette manière. Et au fait, essayons de les aligner au centre. Maintenant, je peux importer les images à l'intérieur cette forme en cliquant simplement avec le bouton droit de la souris sur cette forme. Je peux choisir Plugins, Unsplash, puis je peux choisir un résumé. Importons cette image. Et vous pouvez voir que cette image a été importée. Je peux faire la même chose ici. Par ici. Ici aussi. Ici, et ici aussi. C'est ainsi que vous pouvez facilement importer des images libres de droits dans votre projet Figma. 16. (15) Supprimer l'arrière-plan des images dans Figm: Très bien, voyons comment supprimer l'arrière-plan de nos images. Maintenant, je sais que vous devez tous être au courant de la suppression du site Web Dot Vg. Maintenant, il s'agit d'un site Web vraiment célèbre qui supprime l'arrière-plan de vos images. Je l'utilise même de temps en temps pour supprimer l'arrière-plan de mes images. Donc, ici, vous téléchargez simplement l'une de vos images dont vous souhaitez supprimer l'arrière-plan et vous pouvez télécharger l'image modifiée. Maintenant, pouvons-nous le faire directement dans Figma ? Eh bien, tu peux le faire. Et pour cela, vous aurez besoin d'un plugin, que j'ai évidemment supprimé ou BG. Mais vous devez d' abord vous inscrire et créer un compte ou supprimer le point Vg pour pouvoir générer votre propre clé API. Maintenant, en utilisant cette clé API, vous l' utiliserez dans votre plug-in, le Supprimer l'arrière-plan des images. Permettez-moi donc de m'inscrire rapidement et de créer un compte ici. Je vais utiliser Google. Assurez-vous simplement de sélectionner cette option. J'accepte les conditions d'utilisation. Et si vous souhaitez recevoir les nouvelles fonctionnalités et les offres spéciales par e-mail. Vous pouvez simplement cliquer dessus, leur marketing par e-mail, leur marketing par e-mail, etc. Donc, une fois que vous avez fait cela, accédez simplement aux outils et à l'API. Vas-y. Et vous pouvez générer votre propre clé d'API. Accédez simplement à cette ABI et à cette ligne de commande. Et vous verrez comment obtenir une API. Il suffit d'y aller. Et ils vous montreront que dans le profil du compte, vous verrez la clé API. Je vais donc créer une nouvelle clé API. Je vais créer cette clé API et la copier. Je vais retourner à ma Figma. Je vais sélectionner cette forme particulière dans laquelle je souhaite importer mon image. Passons donc à Plugins Unsplash. Je vais chercher une image de portrait. Cherchons donc un portrait. Je vais sélectionner cette image et je voudrais supprimer l' arrière-plan de cette image. Utilisez l'ancien motif pour que je puisse créer une réplique de cette image. Et je vais télécharger un nouveau plugin en recherchant, supprimant, en supprimant, en cliquant ici. Vous pouvez voir que je peux sélectionner Exécuter et qu'il essaiera de s'exécuter, mais il ne fonctionnera pas. Pourquoi ça ? Tout simplement parce que vous devez d'abord définir la clé API, comme vous l'avez vu, nous devons d'abord définir la clé API. Revenons aux plugins. Je vais cliquer sur cette liste déroulante. Essayons de configurer notre clé d'API. Et maintenant, je vais devoir coller mon EBIT. Je vais donc simplement coller ma clé API et nous cliquerons sur Enregistrer. Et maintenant, je peux supprimer cet arrière-plan en cliquant simplement sur les plugins avec le bouton droit de la souris. Supprimez l'arrière-plan et exécutez, et la suppression de l'arrière-plan prendra un certain temps . Essayons de leur laisser temps de supprimer l'arrière-plan. Et vous verrez que l' arrière-plan a été supprimé. 17. (16) Masquage d'images dans Figma: Très bien, examinons différentes techniques de masquage que nous pouvons utiliser dans Figma. Maintenant, vous vous demandez peut-être ce qu'est ce masquage ? Le masquage est, vous savez, un moyen de manipuler vos images sans réellement détruire la qualité de votre image. Supposons que vous souhaitiez réellement montrer une partie de votre image. C'est donc votre masquage de l'image. Comme nous l'avons vu précédemment, comment supprimer l'arrière-plan des images. Ce n'était rien d'autre qu'un moyen de masquer les images de couverture. Nous supprimons l'arrière-plan de l'image. Nous ne faisions que montrer le portrait, la personne elle-même, comme vous pouvez le voir ici. Si nous supprimons l' arrière-plan de l'image, cette couleur grise que vous voyez n'est rien d'autre que la couleur de notre boîte rectangulaire. Donc, essentiellement, dans cette image particulière, elle n'a pas de fond gris. Maintenant, il occupe la couleur, qui est la couleur de notre boîte rectangulaire. Examinons différentes manières de masquer les majors. Donc, pour cela, je vais simplement créer un nouveau cadre de la taille d'un bureau. Et à l'intérieur, je vais copier cette image. Et je vais le coller ici. Très bien, essayons de masquer cette image. Vous devez donc avoir vu sur les plateformes de réseaux sociaux que les photos de profil sont généralement de forme circulaire. Alors, comment pouvons-nous réellement masquer cette image ? Et c'est ainsi que seuls le visage ou certaines parties de cette image apparaissent à l'intérieur de l'ellipse ou d'une forme circulaire. Donc, ce que je peux faire, c'est créer une nouvelle forme d'ellipse. Sûrement de cette taille. Ça a l'air cool. Maintenant, je ne veux que la partie de mon image, c' est-à-dire le visage à l'intérieur du cercle. Alors, comment puis-je faire ça ? Eh bien, ce que vous devez faire, c'est simplement placer votre image au premier plan dans la section des calques, comme vous pouvez le voir dans le panneau des calques , juste ici, l' ellipse se trouve sur le calque supérieur par rapport ellipse se trouve sur le calque à la boîte rectangulaire que nous avons. Ce rectangle n'est rien que l'image dont nous parlions. Cette ellipse doit donc se trouver derrière notre image. Ou vous pouvez dire que l'image doit apparaître devant notre forme d'ellipse. Vous pouvez donc le faire dans le panneau des couches. Vous pouvez simplement faire glisser la souris vers le bas et l'image apparaîtra au premier plan. Sinon, vous pouvez simplement cliquer avec le bouton droit sur cette forme circulaire. Et vous pouvez simplement ramener ou plutôt Send to Back. Il suffit de le renvoyer à la fin ou bien, comme vous pouvez le faire, vous pouvez sélectionner votre image, cliquer avec le bouton droit sur votre image et la placer au premier plan. Vous pouvez également voir les touches de raccourci correspondantes. C'est donc comme ça que tu procèdes. Sélectionnez ensuite à la fois votre forme d'ellipse et le rectangle en maintenant le bouton Contrôle enfoncé. Dans le panneau Calques, sélectionnez à la fois votre image et la forme de l'ellipse. Cliquez maintenant avec le bouton droit sur l'image et utilisez-la comme masque. Vous pouvez également voir les touches de raccourci, qui sont Control, Alt et M. Une fois que vous avez fait cela, seul le visage apparaît dans la forme circulaire. C'est ainsi que vous masquez réellement vos images et Figma. Essayons également de voir comment masquer une image dans notre texte. Que je vais sélectionner tout cela et déplacer quelque part ici. Bien. Maintenant, je vais créer une nouvelle zone de texte et lire le masque de texte. D'accord, donc la couleur de ce texte semble être, ou plutôt je dois dire que ce texte ne doit pas faire partie de cette couche particulière. Très bien, alors où est mon message ? C'est mon texte. Écrivons mosquée et il faut que ce soit en dehors du cadre. Maintenant, ce qui s'est passé plus tôt, c'est que Figma a automatiquement combiné mon texte avec l'image de la boîte rectangulaire et ma forme d'ellipse en une seule couche. Maintenant que l'image se trouve uniquement dans cette partie de la zone, vous pouvez voir que celle qui est surlignée par des points bleus est un tiret bleu. Cette partie contient l'intégralité de mon image. Si je place mon texte dans cette partie, vous ne verrez évidemment pas mon texte. C'est parce que l'image est occupée à l'intérieur de ce texte. Hein ? Nous voulons maintenant que ce masque contienne une image dans un format principal. Donc pour cela, je préfère , je dois dire que je vais tout écrire en majuscules. Essayons de déplacer ce texte quelque part ici. Rendons cela audacieux, d'accord, c'est déjà audacieux. Essayons de modifier le type de police ou la famille de polices. Changez-le en Roboto. Ça va ? Quand 80 pixels semblent bons. Très bien, essayons d'apporter une image du plugin Unsplash. Je vais donc choisir Unsplash qui utilisera une image abstraite. Passons donc au résumé. Je vais sélectionner cette image ou une autre. Essayons de bien choisir cette image ? Maintenant. Attendons que ça arrive. Très bien, essayons de redimensionner cette image. Je vais donc le redimensionner. J'ai sélectionné la partie échelle. Ça va ? Assurez-vous donc de le réduire. Très bien, ça a l'air cool. Et maintenant, nous voulons que notre texte soit derrière notre image. Vous verrez maintenant que cette image Unsplash ne fait pas partie de mon cadre de bureau. Alors, comment pouvons-nous réellement placer cela dans notre bureau, du bureau au cadre ? Alors, il suffit de le baisser. Et maintenant, vous pouvez voir que ce masque de texte apparaît devant mon image. Mais nous ne voulons pas que cela se produise, sinon le masquage ne fonctionnera pas. Nous voulons donc que le texte soit placé derrière notre image. C'est ainsi que nous pourrons masquer une image dans notre texte. Ainsi, chaque fois que vous souhaitez masquer votre image, assurez-vous toujours que l'image se trouve au recto et l'autre à l'arrière, que vous souhaitiez la masquer sous la forme d'une forme, d'un texte ou la masquer sous la de tout autre élément. Il suffit donc de le renvoyer et de sélectionner à fois votre image et le texte, puis cliquez avec le bouton droit de la souris et utilisez-le comme masque. Une fois que vous avez fait cela, vous pouvez voir que cette image est maintenant dans mon texte. 18. Marge et rembourrage dans la conception d'UX: Avant de passer à la partie de mise en page automatique de Figma, il est important que nous comprenions le concept de marge et de rembourrage. Maintenant, en quoi consistent exactement cette marge et ce rembourrage ? Donc, pour résumer, marge et le rembourrage sont en fait l'espacement entre deux éléments ou éléments différents. Pour expliquer cela, à l'aide d'un exemple, je peux simplement dessiner une boîte rectangulaire. Supposons donc que cette boîte rectangulaire soit, disons, de couleur rouge et une autre boîte rectangulaire de, disons, de couleur verte. Oui. L'espacement entre ces deux cases rouges et vertes s' appelle ma marge. La marge est essentiellement l'espacement, espacement extérieur entre différents éléments ou entre deux éléments ou deux éléments. Donc, la ligne pointillée bleue que vous pouvez voir entre la case rouge et la boîte verte est ma marge. Désormais, la marge est applicable dans les quatre directions. Cela signifie que chaque fois que nous parlons de marge, si vous souhaitez que la marge ait une certaine hauteur, cela peut être du haut, du bas, de la gauche ou de la droite. La marge est donc présente dans les quatre directions, haut, bas, gauche et droite. Donc, si je mets une autre boîte, disons de couleur bleue, laissez-moi simplement la rendre de couleur bleue. Une autre boîte, disons, de couleur jaune. Alors laissez-moi le dire de cette façon, n'est-ce pas ? Et gardons cette couleur jaune. Et essayons également d' apporter une autre boîte. Nous pouvons le garder, disons, de couleur noire . Ça va ? Vous pouvez donc voir la boîte rouge présente une marge dans les quatre directions, de gauche, de haut en bas et de droite. Donc, si je veux vraiment vérifier si c'est la marge ou plutôt les votes, c'est la marge en haut, en bas à gauche, à droite. Vous pouvez voir que lorsque je déplace ces objets, je peux voir qu'il y a une marge entre la gauche et la droite. Vous pouvez voir qu'il y a 88 pixels de marge à partir de ma gauche et de ma droite. C'est ainsi que je peux voir ma marge. La marge est essentiellement la distance entre mes éléments extérieurs. Ça va ? La distance entre deux éléments différents, c'est la distance extérieure entre mes deux éléments. Nous avons maintenant un rembourrage. Le rembourrage est l'espace intérieur entre deux éléments. Si je place, disons que je supprime mes autres formes, comme le bleu ou le jaune. Et laissez-moi également libérer cette arme noire. Très bien, je n'ai que deux cases , une verte et une rouge. Et permettez-moi d'agrandir cette boîte rouge. Donc, en utilisant l'échelle 1, je suis en mesure de l'étendre. Je placerai ma boîte verte quelque part au milieu. Ça va ? Ainsi, l'espacement intérieur entre ma rouge et ma boîte verte s'appelle mon rembourrage. Appelons-le comme rembourrage. Encore une fois, le rembourrage ne correspond pas aux quatre directions en partant du haut, du bas, de la gauche et de la droite. Avant d' aborder la partie extérieure de Figma, il est donc aborder la partie extérieure de Figma, important que nous comprenions marge et le rembourrage. J'espère donc que les principes fondamentaux de la marge et du rembourrage sont clairs pour vous tous. 19. Mise en page automatique dans Figma: Très bien, commençons par la mise en page automatique dans Figma. Maintenant, la mise en page automatique signifie essentiellement que la mise en page que nous allons définir pour notre conception va modifier ses propriétés automatiquement. C'est donc ce que signifie réellement la mise en page automatique. Donc, si j'essaie d' expliquer cela à l' aide d'un exemple, je peux dessiner un cadre, disons, d'environ cette taille. Et à l'intérieur de ce cadre, disons que j'ai un rectangle d'environ cette taille. Très bien, ajoutons du texte à l'intérieur. Je vais donc dessiner une zone de texte probablement de cette taille. Insérons notre texte. Et je vais réduire la taille du texte à environ 32 pixels. Et ajustons également sa hauteur, ou plutôt je dois dire, d'accord, nous n'en avons pas diminué la taille. 36 pixels Ça a l'air cool. Et nous avons configuré la zone de texte pour qu'elle ait une hauteur automatique. Très bien, ça a l'air cool. Et laissez-moi ajuster la zone de texte de manière à ce qu'elle ait une marge appropriée. Cela signifie la marge de cette boîte rectangulaire et celle-ci devrait avoir la même valeur à partir de la gauche. Ça va ? C'est donc ce que j'ai dessiné jusqu'à présent. C'est mon design. Ça va ? Et si je voulais ajouter une autre boîte rectangulaire de, disons, à peu près de cette taille à l'intérieur de mon cadre. Alors, que pensez-vous qu'il se passera dans ce cas ? Mon cadre ajustera-t-il sa hauteur ou sera-t-il mouillé en fonction du contenu que j' y ajouterai réellement ? Non, je ne pense pas. Bon, essayons de voir si je fais glisser cette case à l'intérieur de mon cadre. Premièrement, vous pouvez toujours voir que ce rectangle deux ne fait pas partie de mon cadre. Donc, ce que je peux faire, c'est que si je veux que cette boîte rectangulaire soit incluse dans ce cadre à un autre cadre, je devrai augmenter la taille de mon Freeman, n'est-ce pas ? Je vais devoir sélectionner ce cadre. Alors. Je vais devoir augmenter la taille de mon cadre. Maintenant, vous verrez que ce rectangle fait maintenant partie ou plutôt je devrais le placer ici. Maintenant, ce rectangle fait partie de mon premier cadre. Vous pouvez voir dans le panneau des couches que nous avons d'abord cette zone de texte. Nous avons un rectangle, deux, un rectangle, un, non ? Cela fait donc maintenant partie de mon cadre. Et si je le retire et que je le déplace en dehors de mon cadre, vous pouvez voir que l'outil rectangulaire ne fait pas partie de mon cadre, n'est-ce pas ? Et si j'avais encore une chose ? Disons que je crée une zone de texte supplémentaire. OK, je vais créer une autre zone de texte. Vous pouvez voir si je fais glisser ma boîte rectangulaire dans celle du cadre. Maintenant, cela fait partie de mon cadre lorsque je devais le faire manuellement et en ajouter un pour augmenter la taille de mon cadre également. Et si je souhaite ajouter une zone de texte à l'intérieur de mon cadre ? Disons que je crée un texte. D'accord, laissez-moi coller le texte et j'ajusterai sa hauteur en conséquence. Très bien. Disons qu' au lieu de cela, tous ces textes, restons-en à ce stade uniquement. Oui, ça a l'air cool. Essayons de l'inclure dans notre cadre. Que pensez-vous qu'il va se passer ? Va-t-il entrer à l'intérieur ? Non. Vous pouvez voir qu'il ne fait pas partie de mon cadre. Je dois augmenter ce chiffre. Si je voulais l' inclure à l'intérieur, je dois le mettre dans mon cadre en augmentant la taille du cadre. Donc, la mise en page automatique, ce que fait essentiellement la mise en page automatique, c'est cela, laissez-moi vous montrer ce que fait la mise en page automatique. Donc, ce que je vais faire, c'est placer mon rectangle en dehors de ce cadre. Permettez-moi de réduire la taille du cadre. Je vais donc utiliser mon cadre. Je vais réduire la taille du cadre. Je vais sélectionner ce cadre et le configurer pour ajouter une mise en page automatique. C'est donc une solution. Vous pouvez également constater que la touche de raccourci permettant d'ajouter une mise en page automatique à votre cadre est Shift. Maintenez le bouton Shift enfoncé et appuyez sur la touche D de votre clavier. Ou dans le panneau des propriétés de conception vous verrez également l'icône de mise en page automatique. Et en plus de cela, vous aurez cette icône plus. Une fois que vous aurez cliqué dessus, vous constaterez que la mise en page automatique a été ajoutée. Je peux donc définir cela comme mise en page automatique. Vous pouvez voir qu'il a déjà été ajouté. Pourquoi ça ? Parce que j'ai cliqué ici sur l'icône plus. La mise en page automatique a donc été ajoutée à ce cadre. Et vous pouvez voir, maintenant vous pouvez voir que l'icône Frame One a également été modifiée. Si j'annule en utilisant Control Z, vous verrez qu'au départ, le logo Frame One comportait ce type de boîte à tic-tac-toe. Vous pouvez voir deux lignes verticales et deux lignes horizontales juste ici. Une fois que j'ai réglé la mise en page automatique, vous pouvez voir que l'icône de mon cadre a été modifiée. Cela indique que l'ensemble du cadre dispose d'une mise en page automatique. Maintenant, si j'essaie d' ajouter une boîte rectangulaire à l'intérieur de mon cadre, que pensez-vous qu'il se passera ? Vous pouvez voir que la hauteur du cadre a été ajustée automatiquement. Et si j'essayais d'ajouter ce texte dans mon cadre ? Vous pouvez voir que la zone de texte a également été ajoutée à l'intérieur de mon cadre. Maintenant, vous ne verrez plus le texte lui-même car il est en col blanc. Permettez-moi de le changer en noir. Je peux donc simplement aller à Fill. Je peux sélectionner le noir. Vous allez maintenant pouvoir lire le texte. Ça va ? C'est ainsi que vous pouvez contourner la mise en page automatique. Maintenant, vous verrez que tous les éléments que nous ajoutons à l'intérieur d' un cadre qui a été réglé sur la mise en page automatique. La hauteur est réglée automatiquement. Et si nous voulions ajuster sa largeur en conséquence ? Comment pouvons-nous configurer notre mise en page automatique de telle sorte que, quel que soit l'élément que nous ajoutons à un autre cadre, la largeur augmente au lieu de la hauteur. Alors, de quoi avez-vous besoin pour faire cela ? Sélectionnez votre cadre, accédez au panneau des propriétés du design. Faites défiler cette partie de mise en page automatique et vous verrez ces icônes. Donc, cette icône particulière, disons, est qu'elle a été réglée sur la direction verticale. Si je change cela en direction horizontale, vous verrez que la largeur s'ajuste automatiquement en fonction des éléments dont nous disposons. Vous pouvez donc voir que les éléments sont maintenant dans un format vertical ou horizontal. C'est donc ma direction horizontale, n'est-ce pas ? Donc, si j'ajoute un élément supplémentaire à l'intérieur, la hauteur sera ajustée en conséquence. Bien, maintenant, que signifient cet état particulier, cette icône en particulier ? Cela signifie que l' espacement entre les éléments est actuellement défini à 53 pixels. Comme il n' y a pas d'autre unité. Nous savons qu'il s'agit d'une unité de pixels. S'il s'agissait d'une unité de degré ou de pourcentage, vous devez tous savoir qu' il ne s'agit pas d'une unité de pixel. Pour le moment, ce n'est pas une unité de pixels. Donc, si je mets cette valeur de 53 à, disons, 60, alors vous verrez que cette boîte augmentera ainsi que sa taille. Vous pouvez constater que l'espacement entre cette zone de texte et cette zone rectangulaire a été augmenté. La zone ombrée en rouge est la région qui est l'espacement entre mes différents éléments. Ce sont mes 60 pixels d'espace entre les différents éléments. Vous avez déjà tous entendu parler du rembourrage et de la marge, n'est-ce pas ? Et si je souhaite ajouter un rembourrage par le haut et par le bas ? Alors, comment puis-je m'y prendre ? Permettez-moi donc de revenir à la première image. À l'heure actuelle, il a été réglé sur le sens horizontal. Passons à la direction verticale. Et vous verrez à quoi cela ressemble. Très bien, essayons de faire sortir une boîte rectangulaire du cadre afin qu' elle ne fasse plus partie du cadre. Déplaçons également notre zone de texte en dehors du cadre. Il ne fait donc plus partie du cadre. Vous pouvez constater que la taille du cadre a été réduite depuis que nous avons réglé notre cadre sur la mise en page automatique et dans le sens vertical. Vous pouvez également voir que l'espacement entre les éléments est de 60 pixels, par exemple. Maintenant, vous avez découvert le rembourrage. Et si je voulais ajouter un rembourrage, c' est-à-dire l' espacement intérieur entre mon cadre et la boîte rectangulaire. Si je veux que cela se produise, alors ce que je peux faire, c'est simplement sélectionner mon rembourrage vertical ici. Et je peux le faire passer de 42 à 60, disons. Une fois que j'aurai fait cela, vous verrez que l'espacement entre le haut et le bas a été augmenté. Permettez-moi de déplacer cette zone de texte ici. Très bien. Laisse-moi déplacer ça ici, d'accord ? Maintenant, nous pouvons voir le texte. L'espacement entre cette partie et cette partie a plutôt été de 60 pixels. Et si je veux qu'il soit de taille égale ? Cela signifie du haut, du bas, de la gauche ou de la droite. Voyons également d'abord la voie horizontale. Et si je veux manipuler uniquement le rembourrage dans les directions gauche et droite, alors je peux choisir 100. Et vous pouvez voir que cette taille a été augmentée, celle-ci et cette zone ont été augmentées à 100 pixels. Et si c'est ce que je veux ? Je veux faire en sorte que toutes ces directions aient le même rembourrage. Ensuite, je peux choisir celui-ci 60 aussi, et celui-ci 60 également. Et si je souhaite manipuler la zone de rembourrage uniquement par le haut, par le bas, par la gauche ou la droite ? Puis-je manipuler le rembourrage individuel ? Oui, bien sûr que je peux le faire. Sélectionnez simplement votre cadre, accédez à cette mise en page automatique et sélectionnez cette partie qui indique un rembourrage indépendant. Une fois que vous avez cliqué dessus , vous trouverez à partir du rembourrage gauche, du rembourrage supérieur, du rembourrage droit et du rembourrage inférieur. Vous pouvez donc saisir les valeurs que vous souhaitez voir apparaître dans votre dessin. Une autre chose que vous pourriez voir ici est qu'il est réglé sur un alignement en haut à gauche. Qu'est-ce que cela signifie essentiellement ? Disons que j'augmente la taille du cadre. Permettez-moi de supprimer cette zone rectangulaire et cette zone de texte. Je vais supprimer ces deux éléments pour montrer ce que cela signifie réellement. De plus, je vais également effectuer un zoom arrière jusqu'à environ 50 %. Essayons d'agrandir notre cadre. Donc, comme vous pouvez le constater, si j' augmente la taille de mon cadre, vous verrez toujours que mon contenu, qui est la zone rectangulaire et ma zone de texte, reste collé à la section supérieure gauche. Il ne s'ajuste pas en conséquence car l'alignement a été réglé en haut à gauche. Si je veux que ma boîte rectangulaire et cette partie soient la ligne médiane, je peux les sélectionner ici. Et maintenant, vous pouvez voir qu'il est parfaitement aligné par rapport au centre. Si je voulais être dans la position la plus à droite, mais au centre par rapport à l'axe Y. Je peux le sélectionner si je veux qu'il soit en haut par rapport à l'axe Y, mais aligné au centre par rapport à l'axe X. Je peux sélectionner cette option et vous pouvez simplement jouer avec d'autres directions dans lesquelles vous souhaitez placer vos éléments. Il s'agit donc de votre mise en page automatique. Une dernière chose qu'il nous reste à aborder pour cette conférence est que nous pouvons également avoir une mise en page imbriquée dans la mise en page automatique dans Figma. Maintenant, ce que signifie essentiellement mise en page automatique imbriquée , c'est le terme mise en page automatique dans une mise en page automatique. Disons que j'ai ce cadre, d'accord ? J'ai ce cadre en particulier. Je peux sélectionner ce cadre. Et je peux maintenir, plutôt, je dois dire que je peux sélectionner ce cadre, je peux maintenir la touche Shift enfoncée et un bouton. Et maintenant, vous pouvez voir que nous avons également formé un cadre à l'intérieur duquel nous avons un cadre. Voilà donc ma mise en page automatique imbriquée. Ce que je veux dire, c'est que disons que je crée une boîte rectangulaire. Et si je voulais le placer dans ma mise en page automatique imbriquée ? Si je le fais glisser dans mon cadre deux, vous pouvez voir, d'accord, je vais simplement le faire glisser et le placer dans mon cadre deux. Maintenant, vous pouvez voir qu'il fait maintenant partie de mon cadre qu'il fait maintenant partie de mon cadre pour en encadrer un. partie où se trouvent cette zone de texte et la petite zone rectangulaire est mon cadre un, rectangle deux et le cadre un sont tous deux la partie de mon cadre qui est elle-même réglée sur la mise en page automatique et dans le sens vertical. Si je veux que ce soit dans le sens horizontal, vous verrez que c' est ainsi que cela apparaît. 20. (19) Principes de formage dans Figma: Très bien, continuons avec les principes de mise en forme de Figma. Il y a maintenant quatre principes de formation clés que vous devez garder à l'esprit. Le premier est le regroupement. Ensuite, vous savez, cadrage, la copie et la duplication. Examinons donc chacun d'entre eux. Par exemple, supposons que vous ayez un cadre, disons, d'environ cette taille. Et à l'intérieur de ce cadre, je vais en créer une, disons une étoile. C'est vrai. Maintenant. Il s'agit d'une forme d'étoile. Permettez-moi de déplacer le site. Et je vais créer un texte disant que c'est une étoile. Ça va ? Permettez-moi également d'augmenter la taille de ce texte. Augmentons donc la taille de la police à environ 24 pixels. Essayons-le avec 32. Cela semble beaucoup plus lisible. Il s'agit donc d'un seul texte. Créons également un autre texte, qui dirait quelque chose comme combien de côtés ce début a-t-il 1 234,5 ? Nous dirons donc que cette étoile a cinq côtés, des côtés phi, et que le mouton est couleur grise, quelque chose comme ça. Et essayons également de réduire la taille de la police à environ 20 pixels, n'est-ce pas ? Oui, ça a l'air bien. Encore une chose, laissez-moi réorganiser. Je dirais plutôt que je devrais l'aligner correctement. Celui-ci aussi. Ici, j'écrirais quelque chose comme ça. Très bien, oui, ça a l'air cool. Nous avons donc trois choses dans notre cadre. Nous avons d'abord notre forme, nous avons ce texte, puis nous avons la description de ce texte. Maintenant, si je dois regrouper cet élément et cet élément , comment puis-je le faire ? Je peux simplement sélectionner celui-ci. Je peux maintenir la touche Shift et cliquer sur l'autre élément. Nous pouvons maintenant voir dans le panneau des couches que ces deux textes ont été sélectionnés jusqu'à présent. Si je veux les regrouper, je dois appuyer sur la touche Ctrl ou Command si vous utilisez le MacBook et la commande G. Une fois que vous avez fait cela, vous pouvez voir qu'un groupe a été formé. Dans ce groupe, nous avons ces deux éléments de texte. Maintenant, avec l'aide de ce groupe, je peux simplement le faire glisser et le placer où je le souhaite. Cela a formé un groupe entier. Ça va ? Il s'agit donc d'un seul groupe. Si je souhaite regrouper cette forme avec cette forme, ce serait un groupe imbriqué. Parce qu'il peut s'agir d'un groupe au sein d'un groupe. Vous pouvez donc le faire également. Encore une fois, il suffit de sélectionner cet élément, qui est notre forme d'étoile. Maintenez la touche Maj enfoncée, sélectionnez votre autre groupe ou tout autre élément que vous souhaitez regrouper et maintenez les touches de commande et G enfoncées. Une fois que vous aurez fait cela, vous constaterez que ce groupe est maintenant devenu un groupe entier. Hein ? Maintenant, à l'intérieur de ce groupe deux, vous constaterez que ce groupe deux a une forme d'étoile et un groupe lorsqu'il est lui-même. Ce premier groupe contient ces deux éléments de texte. C'est ainsi que vous regroupez les différents éléments à l'intérieur votre cadre ou dans Figma. Très bien, c'est ainsi que vous les regroupez. Maintenant, voyons comment copier ces éléments. Supposons que je veuille copier l'élément de mon groupe un, pas l'intégralité du groupe deux, mais simplement l'élément Groupon. Disons que j'ai une autre forme, quelque chose comme, disons, un polygone. Je vais donc créer un polygone. Ça va ? Et je veux ce groupe 1. Donc, ce que je vais faire, c'est maintenir la touche Ctrl enfoncée. Si vous utilisez un Mac, ce serait commande et appuyez sur le bouton C, qui est le contrôle de copie, C est la copie. Maintenant, j'ai copié tout ce groupe, un, qui contient deux éléments de texte, n'est-ce pas ? Tout d'abord, le nom de notre forme et la description de notre forme. Si je veux coller ce texte sous mon polygone, comment dois-je procéder ? est simple, je vais utiliser la commande V. Maintenant, bien que j' aie appuyé sur la commande V, et dans le panneau des couches, vous pouvez voir qu' un autre groupe appelé Groupon a été formé avec ce texte. Hein ? Alors pourquoi ne pouvons-nous pas voir notre élément de texte que nous venons de coller ? C'est parce qu'il a collé à peu près cela. Donc, si je le fais glisser, vous constaterez qu'il s'agit de notre copie de notre premier groupe. Hein ? Je peux maintenant manipuler ce texte en sélectionnant cette partie. Je peux dire que c'est un polygone. Ce polygone. Il a trois côtés. Et la forme est de couleur grise, non ? Donc, c'est ainsi que vous formez ou non vous copiez différents éléments et vous les collez. C'est donc une façon de procéder. Une autre solution est de dire plutôt que je vais créer un autre cadre. Ça va ? Je vais créer un autre cadre. Permettez-moi de créer une ellipse d'environ cette taille, n'est-ce pas ? Donnons-lui une couleur dans le remplissage. Je vais lui donner une couleur sarcelle, peu, tu sais, couleur aigue-marine, bleu clair, non ? Et j'aimerais faire une copie ou une copie de cet élément en particulier. Et comment vais-je m'y prendre ? Je peux maintenir mon bouton de contrôle enfoncé et j'utiliserai d, qui est un contrôle dupliqué. D signifie duplicata. Un doublon a été créé aide d'une seule touche de raccourci Ctrl D. Je n' ai pas besoin de contrôler C et de contrôler V. J' ai utilisé Ctrl D pour créer une copie de ma forme. Mais pourquoi ne puis-je pas voir mon doublon ? Par une réponse simple ? C'est juste à peu près mon ellipse 1. Donc, si je traîne, vous verrez que nous avons formé un doublon. Maintenant, encore une fois, si je mets ceci ou si je fais une copie de cet élément en particulier, vous constaterez encore une fois qu' aucun doublon n'a été formé. Si je refais Control D, vous verrez maintenant qu'une forme, qui se trouve en dehors d'un cadre, me permet d'augmenter la taille de mon cadre. Mais maintenant, c'est au même espace, l'espace entre cette ellipse, cette ellipse, peu importe, quelle que soit la distance parcourue, les mêmes distances maintenues ici également, l' ANOVA également. Alors maintenant, à l'aide de la commande D, ce qui se passe, c'est que vous créez une copie de vos éléments ou de votre forme. Et c'est aussi maintenir la distance que vous avez entre les différents éléments, n'est-ce pas ? Donc je peux, ce que je peux faire, c'est augmenter la taille de mon cadre. C'est vrai. Vous verrez maintenant que nous avons également la quatrième ellipse. C'est ainsi que vous pouvez dupliquer vos formes qu'éléments à l'aide de la commande Control D. Très bien, jusqu'à présent, vous avez appris à regrouper des éléments, à créer un doublon, à créer une copie. Très bien, essayons de voir comment nous pouvons gérer la mise en page automatique. Et bien que nous ayons abordé la mise en page automatique, permettez-moi également de vous montrer ce qui se passe si nous appliquons la mise en page automatique au texte, non au cadre, mais que les deux autres sont du texte. Mais je devrais plutôt le dire. Que se passe-t-il si je crée une forme rectangulaire ? Bien, supposons que c'est ma forme rectangulaire. Et maintenant, nous avons une ellipse à l'intérieur de cette forme rectangulaire. Très bien, laissez-moi donner cette forme rectangulaire en rouge. Une autre, cette ellipse a une couleur rouge et un rectangle en col blanc. Très bien, je vais sélectionner mon rectangle, et je vais lui donner une couleur blanche unie. Ça va ? Maintenant, ce qui se passe, c'est que si je veux réellement que ce rectangle se comporte comme un cadre , je peux simplement le sélectionner. Et je peux créer, c' est-à-dire sélectionner des cadres. Je peux le faire. Et maintenant, vous pouvez voir qu'un troisième cadre a été formé. Encadrez l'un de nos polygones. Ce truc. Laissez-moi vous montrer ce que je veux dire par là ? Donc je vais juste faire un petit zoom arrière, non ? Oui, ça a l'air parfait. Maintenant, vous verrez que c'est mon cadre, tout cela est aussi mon cadre, c'est mon cadre. Ça va ? Donc, dans mon troisième cadre, j'ai mon rectangle. Donc, pour le moment, mon rectangle n' agit pas comme un cadre. Au contraire, mon rectangle est maintenant à l'intérieur du cadre. Si je clique sur ce cadre, vous verrez que cet enchevêtrement fait désormais partie de mon cadre, n'est-ce pas ? Si je déplace ce cadre, vous verrez que l'ellipse est à sa position initiale. Il ne bouge pas avec le cadre. D'habitude, ce qui se passe, c'est ça, laissez-moi vous montrer ce que je veux dire par là ? Si je dis cela, je veux déplacer ce cadre qui a notre étoile polygonale et tout le reste. Si je veux déplacer l'ensemble du cadre, alors l'ensemble, tous les éléments à l'intérieur de ce cadre se déplaceront également. Vous pouvez le voir, mais ce n'est pas le cas avec notre troisième cadre. Pourquoi ça ? Parce que si vous regardez le panneau des couches de très près, vous constaterez que l'ellipse ne fait pas partie de notre troisième cadre. Si je veux que cette ellipse fasse partie de notre cadre 3, je dois l'intégrer à notre cadre 3. Hein ? Maintenant, si je déplace mon cadre trois, vous verrez les ellipses se déplacer également. C'est donc le concept du cadrage. Jusqu'à présent, nous avons appris à cadrer, regrouper, à copier et à dupliquer, n'est-ce pas ? Apprenons la dernière chose que nous devons aborder pour cette partie. Permettez-moi d'ajouter un texte. Donc, disons que j'ai un texte et qu'il ne fait pas partie de mon cadre. C'est juste dans l' espace de travail de Figma. Et je veux y ajouter un cadre. Alors, comment vais-je pouvoir le faire ? Je peux simplement ajouter une mise en page automatique, non ? Nous avons découvert mise en page automatique dans les cours précédents. Si vous souhaitez en savoir plus à ce sujet, vous pouvez simplement vous référer à ces conférences. Encore une fois. Écrivons un texte simple disant que c'est simple. Suivant. Très bien. Vous pouvez maintenant voir, bien que j'aie créé ce texte, qu'il est de couleur blanche et qu'il n'a aucun arrière-plan car il ne fait partie d'aucun cadre. Si je veux ajouter ce cadre intérieur, je peux simplement y ajouter une mise en page automatique, n'est-ce pas ? Vous pouvez donc voir qu'un cadre l'est plutôt, je dois dire que le texte fait désormais partie de mon cadre. Vous pouvez le voir ici. Maintenant, comme il s'agit désormais d'une mise en page automatique, je peux également spécifier la direction de la mise en page automatique. Si je veux que ce soit sens vertical, dans le sens horizontal. Que je souhaite que cet élément soit aligné en haut à gauche ou au centre, je peux le faire. Mais ce qui est important, c'est que ce cadre n'a pas de couleur. Je peux donc ajouter un remplissage à cela. Une fois que je l'ai fait, vous verrez une couleur blanche a été ajoutée. Maintenant, si je dois sélectionner mon texte, je peux changer cette couleur en noir. Vous pourrez maintenant voir correctement notre cadre de texte. Je peux ajouter du texte ou y apporter quelques modifications. Quelque chose comme, disons que c'est un texte. Je peux simplement supprimer le mot simple. Et maintenant, la taille du cadre diminue également simplement parce que tout le texte fait désormais partie de mon cadre et qu'il est désormais mis en page automatiquement, n'est-ce pas ? C'est ainsi que nous procédons. Désormais, vous pouvez même ajouter une mise en page automatique à une forme. Alors voyons voir. Ajoutez une mise en page automatique à votre ellipse, puis vous pouvez même le faire. Je peux donc sélectionner toute cette ellipse. Je peux y ajouter une mise en page automatique. Et maintenant, le cadre contient cette ellipse. C'est ainsi que fonctionnent réellement les principes de formatage de Figma. 21. Contraintes et redimensionnement de Figma: Très bien, continuons avec contraintes et le redimensionnement dans Figma. Maintenant, que signifient réellement les contraintes ? Les contraintes sont donc un moyen de placer nos objets dans une position fixe. Essayons donc de comprendre à l'aide d'un exemple. Disons que je crée un cadre d'environ cette taille. Et j'ai placé une ellipse quelque part ici, en haut à gauche. Et laissez-moi donner une couleur à cette forme particulière, quelque part comme ça. Ça va ? Maintenant, ce qui se passe ici, c'est que si je modifie réellement la taille de mon cadre, si je l' agrandis, vous savez, depuis le côté droit, la position de cette ellipse particulière ne changera pas. Si j'augmente de ce côté, cela change. Pourquoi ça ? Pourquoi s'en tient-il à sa position en haut à gauche ? Parce que dans le panneau des propriétés de conception, si vous regardez de près, vous verrez que les contraintes ont en fait été définies par défaut à gauche et en haut. Gauche signifie que dans le sens horizontal. Cela signifie que vous essayez d' étirer votre cadre par la droite ou par la gauche. Votre forme, l'ellipse de l'élément qui a été sélectionnée pour le moment, toujours essayé de rester sur le côté le plus à gauche. Et sur l'axe Y, cela signifie que si j' essaie d'agrandir ou de comprimer mon cadre depuis la position supérieure ou depuis la position inférieure, il essaiera de rester dans la position la plus haute. Laissez-moi vous montrer ce que je veux dire par là. Si j'essaie de presser mon cadre de bas en haut, vous verrez que l'ellipse ne change pas de position. Mais si j'essaie de modifier la position de mon cadre de haut en bas, vous verrez que mon ellipse essaie de rester dans la partie supérieure de mon cadre. C'est donc possible en raison de contraintes. Hein ? Maintenant. Essayons d'imiter la conception d'un site Web, vous savez. Donc, ce que je vais faire, c'est créer une icône de hamburger. Donc, l'icône du hamburger, vous savez, l'icône du hamburger ne se compose que de ces trois lignes. Et une fois que vous aurez cliqué dessus, vous verrez votre barre de navigation. C'est donc essentiellement ce que fait votre icône de hamburger. Je vais donc en faire une réplique. Cette gamme, Hamburger, comporte essentiellement trois lignes, donc nous allons le faire. Oui, voici à quoi ressemble réellement mon icône. OK, laissez-moi les regrouper. Très bien, je vais les regrouper à l' aide du contrôle G. Et laissez-moi le renommer en, vous savez, je vais le renommer hamburger au jambon. Hamburger. Et essayons également d' ajouter des éléments de texte. Disons à la maison. Ensuite, je vais en créer un sur. Donnons donc à peu près à cela Essayons également d'augmenter légèrement la taille de notre cadre afin d'avoir un peu d'espace pour ajouter notre contact. Contactez-nous également. Donc contacté. Très bien, essayons de regrouper ces trois éléments de navigation. Permettez-moi donc de le renommer également en disant que navigation, d' accord, marine. Bien. Essayons de les déplacer pour qu'ils apparaissent quelque part comme ça, non ? Ça a l'air bien. Et essayons de redimensionner un cadre de manière à ce qu'il apparaisse comme s'il s'agissait d' un affichage sur mobile ou sur tablette. Très bien, essayons de corriger cette position de l'icône de mon hamburger vers la gauche ou vers le haut. Et nous allons le placer de telle sorte que, dans le sens horizontal, il ait toujours le goût du côté le plus à droite. Et sur l'axe Y, il reste sur le côté le plus haut. Maintenant, une fois que j' aurai fait cela, que se passera-t-il si j'essaie d' augmenter ou de diminuer la taille de mon cadre ? Donc, si j'essayais de réduire la taille de mon cadre, vous verrez que cette icône de navigation, boutons de navigation ressemblent à votre page d'accueil à propos du contact. Ils essaient tous de rester côté le plus à droite de notre cadre. Si j'essaie d'agrandir le cadre depuis le côté gauche, vous verrez que l'icône du hamburger reste sur le côté le plus à gauche. Mais ces éléments de navigation, qui sont la maison et le contact, ne changent pas de position parce qu' ils essaient de rester sur sont la maison et le contact, ne changent pas de position parce qu' ils le côté le plus à droite. Si j'essaie d' augmenter à partir du bas, vous ne verrez aucun changement se produire. Ils resteront à leur position. Mais si j'essaie de réduire ou augmenter par le haut la taille de mon cadre, évidemment, il essaiera de rester dans la position la plus haute. Que se passera-t-il si j'essaie de sélectionner l'icône de mon hamburger et si je modifie les contraintes de gauche à gauche pour, disons, au centre, alors que se passera-t-il dans ce cas ? Si j'essaie d'augmenter la taille de mon cadre dans le sens horizontal, vous verrez que l'icône du hamburger change également de position. Parce que maintenant, il essaie de s'en tenir à la position la plus centrale par rapport à l'expansion située le plus à gauche. Mais si je l'annule et si j'augmente la taille de ma position ou la taille de mon cadre. De la partie supérieure ou inférieure, vous ne verrez aucun changement se produire. Il essaie de coller à la partie la plus haute, car sur l'axe Y, nous avons choisi de coller à la partie la plus haute. Si je le place au centre, vous verrez maintenant le changement. Laisse-moi essayer de diminuer. Dans ce cas, vous ne verrez pas l'icône du hamburger. Pourquoi ça ? Parce qu'il essaie de rester en position centrale. Si j'ai essayé d'augmenter, vous verrez qu'il essaie de diminuer. Cela signifie qu'en ce qui concerne l'axe Y, mon icône de hamburger essaie de rester à la position la plus centrale. Vous pouvez donc jouer avec d'autres directions pour voir comment notre élément réagirait. Alors laisse-moi juste dézoomer et où est mon cadre ? Nous avons donc ici notre cadre. Ça va ? J'espère donc que les principes fondamentaux de vos contraintes sont clairs. Essayons de comprendre le redimensionnement. Maintenant, le redimensionnement est à peu près la même chose que les contraintes. La seule différence est que les contraintes sont généralement appliquées aux éléments ou aux éléments qui font partie de la disposition normale du cadre. Alors que le redimensionnement s'applique aux éléments ou aux éléments qui appartiennent à un cadre au format de mise en page automatique. D'accord, voyons comment utiliser le redimensionnement. Donc, ce que je vais faire, c'est créer un cadre. Très bien, laissez-moi dessiner un cadre de cette taille, disons. Et je vais y ajouter une mise en page automatique. Je vais donc ajouter une mise en page automatique et j'ajouterai un élément, qui est un rectangle à l'intérieur de ce cadre. Maintenant que ce cadre fait désormais partie de notre cadre il s' agit d'une mise en page automatique. Vous pouvez regarder cette icône en particulier. Cette icône signifie que ce cadre est en mise en page automatique, alors que cette icône signifie que le cadre est anormalement ouvert. Alors maintenant, la mise en page automatique, nous savons tous ce qui s'y passe. Cela modifie essentiellement la taille de mon cadre par rapport aux éléments à l' intérieur de mon cadre. C'est ce que nous avons fait jusqu'à présent. Vous verrez maintenant que même si j'ai ajouté mon rectangle à l'intérieur du cadre, au départ, la taille de mon cadre était bien trop petite par rapport à ce qu'il est actuellement. Mais au fur et à mesure que j'augmente la taille de mon rectangle, la taille de mon cadre augmente également, mais nous pouvons toujours voir un écart entre mon rectangle et mon cadre. C'est ce qu'on appelle le rembourrage. Nous avons également abordé ce sujet plus tôt. Mais que se passe-t-il si j' essaie d'éliminer tout le rembourrage des positions ? C'est à partir de la position X, Y. Que se passe-t-il dans ce cas ? Je vais sélectionner mon cadre. Je vais accéder au panneau des propriétés de conception. Et ici, vous verrez le rembourrage en position horizontale et en position verticale. Donc, si je passe de dix à zéro, x, y et à partir de la direction y, également zéro. Vous verrez alors que le rectangle n' occupe aucun espace supplémentaire. Ou plutôt je devrais dire qu'il n' y a pas de rembourrage à l'intérieur du cadre. Et le rectangle correspond exactement à la taille de mon cadre, n'est-ce pas ? C'est donc ma façon de représenter. Maintenant, que se passe-t-il dans ce cas, si je sélectionne mon rectangle, cette forme particulière ? Vous ne verrez pas les contraintes. Méthode des contraintes. Ce que nous avions l'habitude de voir plus tôt. Nous ne pouvons pas le voir pour le moment, car nous avons actuellement tout cela dans un format de mise en page automatique. Nous devrions voir un panneau de redimensionnement, à droite, au lieu de contraintes. Alors, comment pouvons-nous voir cela ? Que devons-nous faire pour y parvenir ? Donc, ce que nous pouvons faire, c'est à l'intérieur de ce rectangle, ou plutôt je devrais dire à l'intérieur de ce cadre, vous verrez maintenant le rectangle dans la partie de mise en page automatique, juste là où mon curseur pointe. Vous verrez que le rectangle est maintenant aligné en haut à gauche. Si j'arrive à l'alignement central et que j' essaie d'augmenter la taille de mon cadre, vous verrez que maintenant le rectangle reste à la position la plus centrale, qu'il soit censé être par rapport à l'axe X par rapport à l'axe Y. Le rectangle se trouve dans la position la plus centrale. Cela est possible car dans la partie mise en page automatique, nous avons sélectionné que le rectangle de notre élément soit au centre, aligné, n'est-ce pas ? C'est ce que nous avons fait jusqu'à présent. Maintenant, si c'est ce que je veux, je veux qu'il y ait un élément de redimensionnement, alors comment pouvons-nous le faire ? Je peux donc simplement sélectionner cet élément rectangulaire dans le panneau des propriétés de conception. L'extrémité fixe, horizontale, est essentiellement mon redimensionnement horizontal. C'est mon redimensionnement vertical. Ils sont donc tous deux définis par défaut sur Fixed. Si je passe d'un contenant fixe à un contenant rempli, par exemple que pensez-vous qu'il se passera dans ce cas ? heure actuelle, cette largeur fixe signifie essentiellement que peu importe que j'augmente la taille de mon cadre, il y aura une sorte d'espacement entre mon cadre et mon rectangle. Bien que nous n'ayons utilisé aucune sorte de rembourrage, il y aura tout de même de la place car l'heure actuelle, la taille de mon cadre est plus grande que la taille de mon rectangle. Et le triangle a été réglé sur fixe. Redimensionnement. Il a été dit de régler sur une largeur fixe. Et le rectangle est maintenant au centre le plus aligné par rapport aux axes y et x, n'est-ce pas ? Maintenant, si je change cela en ceci, ce qui signifie que ce rectangle doit être un conteneur rempli, alors cela signifie un conteneur. Qu'est-ce que le terme « conteneur » signifie essentiellement ? Le contenant agit comme une boîte, un compartiment de rangement. C'est ce que signifie essentiellement « conteneur ». Donc, le rectangle ou plutôt je devrais dire que le cadre agit maintenant comme un conteneur. Et maintenant, vous dites que le rectangle doit occuper sa taille en fonction du contenant. Donc, peu importe la taille de mon cadre, il augmentera sa taille et s'étirera. L'élément. rectangle occupe ici la largeur maximale possible, et il essaiera de toucher les bords de mes trois. Cela est possible car nous avons réalisé un conteneur complet par rapport à l'axe horizontal. Si je le fais également pour l'axe vertical, il le fera également comme ça. Donc, pour le moment, nous n' avons pas de rembourrage. Notre rectangle est également une ligne centrale. Et la taille de mon cadre peut également diminuer. Ou plutôt, je dois dire que la taille de mon cadre, et non un enchevêtrement, peut diminuer tout en diminuant ma boucle rectangulaire. Il occupera la taille de mon cadre par rapport à celui-ci. Il va changer de taille. Le rectangle changera de taille par rapport à la taille de mon cadre car nous avons utilisé le redimensionnement pour qu' il remplisse son contenant, n'est-ce pas ? Donc, si je développe, vous pouvez voir que le rectangle s'agrandit également. Cela est possible grâce au redimensionnement. Très bien, essayons de regarder un autre exemple. Et si je créais, ou plutôt devrais-je dire, revenons à notre cadre où nous avons une mise en page normale. Très bien, nous avons une couche normale. Nous n'avons pas de mise en page automatique pour ce célèbre jeu. D'accord, nous avons une icône en forme de hamburger, nous avons nos outils de navigation, n'est-ce pas ? Et si je souhaite ajouter un texte à l'intérieur de ce cadre particulier ? Supposons que je souhaite ajouter une zone de texte. Très bien, je l'ai dessiné sur XBox. Je vais cliquer avec le bouton droit sur ce cadre. Je vais accéder à mes plugins. Et maintenant, vous pouvez voir que j'ai un plugin appelé Lorem Ipsum. Si vous n'avez pas celui-ci, allez simplement chercher d' autres plug-ins et recherchez le plugin Lorem Ipsum. Essaie juste de lancer ça. Maintenant, ce que fait ce plugin , c'est essentiellement essayer de générer du texte aléatoire. Et maintenant, il nous demandera de sélectionner certaines couches de texte. Je vais donc sélectionner cette couche de texte. Et ici, il nous demande si vous voulez générer au hasard dix mots et phrases, dix caractères, dix paragraphes, ce que vous voulez. Supposons que je veuille générer dix phrases, ou réduisons à cinq phrases. OK, je vais le générer. Et maintenant, vous verrez que c' est ainsi que cela apparaît réellement, mais nous ne voulons pas que cela apparaisse de cette façon. Et puis, je veux que ça prenne de la hauteur automatiquement. Ça va ? Et je souhaite modifier la taille de ma zone de texte. Alors, comment pourrais-je m'y prendre ? Permettez-moi simplement de déplacer cette position. Et ce que je peux faire ici, c'est réduire la taille de ma zone de texte. Très bien, essayons de réduire la taille de ma zone de texte quelque part comme ceci. Maintenant, ça a l'air cool. Et essayons de faire en sorte que cela ait une hauteur automatique. Masquage automatique. Cela signifie que quel que soit le nombre de mots ou de caractères différents que j'ajoute dans ma zone de texte, ma taille augmentera ou diminuera en conséquence, n'est-ce pas ? C'est ce que cela signifie essentiellement. Essayons de l'aligner de telle sorte que, quoi que je fasse avec mon ami, cette zone de texte reste au centre. Nous allons donc essayer de l'aligner au centre. Bien. C'est ainsi que j' aimerais que ma zone de texte soit. Et dans le cadre de mes contraintes, j'aimerais qu'il soit dans la position la plus centrale par rapport à l'horizontale ou à l'axe X et à l'axe Y également, j'aimerais qu'il soit aligné au centre. Alors maintenant, si j'essaie de manipuler mon cadre, disons que si je diminue la taille de mon cadre, vous verrez que ma zone de texte reste toujours dans la position la plus centrale, n'est-ce pas ? Cette icône de hamburger doit se trouver à gauche et en haut. Bien, maintenant, si j'essaie d' augmenter la taille de mon cadre, vous verrez toujours que cette zone de texte est au centre, n'est-ce pas ? C'est ce que nous avons fait à l'aide de contraintes, n'est-ce pas ? C'était donc à peu près tout. Revenons-en à mon hamburger. J'espère qu'il est en haut à gauche. Ouaip. Passons à la partie suivante, qui consiste à aligner ou appliquer le concept de redimensionnement à notre texte. Disons que j'ajoute du texte ici. Permettez-moi de dessiner une zone de texte, ou plutôt je devrais dire qu' au lieu d' une zone de texte vide, laissez-moi simplement cliquer ici avec le bouton droit de la souris. Générez un texte aléatoire d' environ cinq phrases à propos de cette boîte. Très bien, généré. Vous pouvez maintenant voir que cinq phrases ont été générées. Et je vais sélectionner toute la case suivante et appliquer la hauteur automatique. Très bien, cool. C' est ce que nous voulions. Essayons d'ajouter une mise en page automatique à cette zone de texte particulière. Je vais donc ajouter la mise en page automatique à cette zone de texte. Il suffit donc de cliquer avec le bouton droit et d' ajouter une mise en page automatique. Et vous pouvez voir que la mise en page automatique a été ajoutée à ces textes particuliers, qui signifie que ce troisième cadre contient maintenant du texte. cadre 3 n'est pas visible, mais le texte fait désormais partie de mon cadre 3. Ça va ? Maintenant, je peux donner à ce cadre trois fois cette couleur. Essayons donc d'ajouter une couleur de fond, disons grise, n'est-ce pas ? Une couleur verdâtre. Couleur grise. Et le texte serait noir, jaune, n'est-ce pas ? Essayons de lui donner une couleur noire. Cool. C'est ce que nous voulions. Maintenant, que se passe-t-il dans ce cas, si je sélectionne mon texte, vous verrez celui qui est redimensionné. Il a un hub, un conteneur plein. Il a actuellement une largeur fixe, sélectionnée et, par rapport à l'axe Y, il possède un contenu. Maintenant, que se passe-t-il si j' essaie de réduire la taille de mon cadre ? Vous verrez que la taille de mon cadre est réduite, mais le texte est maintenant hors de mon cadre. La zone de texte n' ajuste pas sa taille en fonction de la taille de mon cadre. Alors, comment allons-nous changer cela ? Je peux sélectionner mon texte et je peux faire la même chose, qui est un conteneur plein. Maintenant, si j'essaie de réduire la taille de mon cadre par rapport à l'axe X, vous verrez que la taille de ma zone de texte augmente également en hauteur, car elle essaie maintenant de s'adapter au conteneur, n'est-ce pas ? C'est ce que nous voulions. C'est ainsi que nous pouvons le faire et nouer des liens. Et si j'ajoutais ce cadre entier à trois aperçus, un autre cadre qui n'est pas une mise en page automatique, que se passera-t-il dans ce cas Essayons de créer un cadre d'à peu près cette taille. Ajoutons ce troisième cadre à mon cadre pour savoir ce qui se passerait dans ce cas. Que se passerait-il ? Essayons de le découvrir. Alors laissez-moi l'aligner quelque part ici. Je vais sélectionner ce cadre trois. Maintenant, une chose à noter ici est qu'une fois que nous avons ajouté un cadre 3, qui est lui-même une mise en page automatique à l'intérieur d'un autre cadre, qui n'en est pas une, qui est normalement le cas, alors ce que nous pouvons voir sera des contraintes C ou nous allons voir un redimensionnement. Eh bien, la réponse est que nous les verrons tous les deux. Comme vous pouvez le constater, une fois que j'aurai sélectionné mon troisième cadre, j'aurai accès à des options de redimensionnement, qui contiennent soit une largeur soit une hauteur fixe. Et sur l'axe Y, je verrai également ces deux options, et je verrai également les contraintes ici. Donc, à l'heure actuelle, par défaut, il a été indiqué en position la plus à gauche par rapport à l'axe X. Et il est réglé sur la position supérieure, contrainte supérieure par rapport à l'axe Y. Vous pouvez donc simplement jouer avec différentes directions pour voir comment cela fonctionnerait et à quoi cela ressemblerait pour votre design. Tout cela était donc de mon côté pour cette conférence en particulier. contraintes et le redimensionnement sont des concepts très importants à apprendre dans la conception de sites Web ou d'applications Figma, tout simplement parce que lorsque nous essayons de créer des designs réactifs, c'est-à-dire de créer une apparence ou de développer des designs pour différents appareils, nous devons savoir comment notre conception réagirait à cette taille particulière de notre appareil. 22. Styles et composants Figma: Bien, continuons avec les styles et les composants. Maintenant, chaque fois que nous essayons de développer un site Web ou une application Web, ou il peut s'agir d' une autre application. Nous devons créer des styles et des composants pour notre conception. Pourquoi en avons-nous besoin maintenant ? Essayons d'abord de les comprendre. Donc, pour donner un exemple, vous pouvez simplement consulter mon propre site Web. J'ai créé mon propre site Web en utilisant des technologies telles que Reactant, Tailwind, CSS. Donc, ici, si vous pouvez voir du point de vue du design, vous pouvez voir que le texte est de couleur noire. L'arrière-plan ou, vous savez, le point culminant principal de ce produit n'est pas une couleur blanc pur. C'est quelque part dans la nuance de gris, même dans la barre de navigation supérieure, vous verrez qu'il y a une certaine teinte dans ce gris, n'est-ce pas ? Ce n'est pas complètement sombre, ce n'est pas complètement clair. Il y a quelques nuances de gris. Chaque fois que nous essayons de passer la souris sur les boutons de navigation, comme dans vos cours d'accueil , contactez-moi, vous verrez une couleur bleue lorsque nous les survolerons. Et c'est le même Teller qui est utilisé ici. Lorsque vous faites défiler la page vers le bas, vous verrez que ces cartes, comme la technologie que j'utilise, le HTML, le CSS Bootstrap React, le JavaScript, NodeJS, Java, etc. Toutes ces cartes ont des ombres. Il a un certain rayon de bordure. Il a un style fixe ou une taille fixe de largeur et de hauteur qui ont été cohérents sur l'ensemble du site Web. Et au bas de mon pied. Exact. Vous pouvez le voir en bas de ma page Web, qui est mon pied de page, ou via vous pouvez voir mes liens sociaux. Si je le survolais, vous verrez les couleurs des icônes, les couleurs icônes de la marque. Ainsi, par exemple Twitter a une couleur bleue, grille vers le haut, une couleur orange. Ainsi, lorsque vous survolez ces couleurs, survolez ces articles, vous verrez les couleurs de la marque. Dans un premier temps. Vous ne verrez aucune couleur car je dois maintenir la cohérence de mon design sur l' ensemble du site Web. C'est donc ce que nous avons fait. Très bien, maintenant, chaque fois que nous essayons de développer un design pour notre site Web, avant tout essayer de créer des styles, des styles et des styles de typographie. Alors, quel type de couleurs allons-nous utiliser sur l'ensemble de notre site Web ? Quelle sera la couleur principale ? Quelle sera ma couleur secondaire ? De quoi ai-je besoin pour un dégradé de couleur de marque ? Est-ce que j'en ai besoin ? Si c'est le cas, bien sûr. Allez-y et incluez-les également. Ensuite, qu'en est-il des couleurs du texte ou peut-être de l'ombre ou, vous savez, de certains points saillants de l'arrière-plan. Ces couleurs sont donc également importantes. Vient ensuite la partie topographie. Cela signifie le type de taille de texte que vous souhaitez pour le titre de votre site Web. Quel type de police, quelle famille de polices souhaitez-vous utiliser ? Le type de poids de police que vous souhaitez utiliser. Voulez-vous utiliser le gras. Passez à semi-audacieux, nouveau, normal. Qu'est-ce que tu veux ? Quel est le degré d' espacement souhaité entre les lettres ? Quelle est la hauteur de ligne que vous souhaitez atteindre ? Toutes ces choses seraient formées dans un style formel. L'avantage de l'utilisation de styles est qu'une fois que vous avez créé un style, vous pouvez créer plusieurs copies de ces vignettes dans d'autres composants ou dans d'autres styles de votre site Web. Ce que je veux dire par là, c'est que, disons, sur leur site Web d'accueil, vous avez créé le design du centre. Maintenant, dans la page à propos, vous devrez réellement maintenir cette cohérence du design. Nous essayons donc d'essayer manuellement coller ces codes hexadécimaux pour votre couleur. Essayez de faire chaque détail. Non. Pourquoi ne pas simplement coller le style que vous avez appliqué sur la page d'accueil. Cela vous simplifiera la vie, n'est-ce pas ? C'est donc à cela que sert le style. Supposons qu'après avoir développé l'ensemble du design, vous le montrez à votre client. Des clients, c'est vous savez quoi ? Je ne trouve pas cette couleur si attrayante. Je voudrais changer la couleur des boutons, par exemple, du rose au bleu sarcelle. Ainsi, lorsque vous essayez d' accéder à chaque page Web, comme la page d'accueil à propos de la page de contact payante trouver tous les boutons, puis vous essayez manuellement de changer les couleurs du rose à la couleur. Si j'ai le style que j'ai appliqué à tous les boutons, je peux simplement changer la couleur de mon style. Et le reste des modifications sera appliqué à tous les boutons de mon site Web, n'est-ce pas ? C'est donc l' avantage de mon style. La compétence, en revanche, c'est comme si je voulais créer un bouton, ou disons une voiture comme celle-ci, n'est-ce pas ? Une voiture n'est qu'une carte d'affichage, d'accord ? Ou des icônes comme celles-ci, de cette taille. Ensuite, une fois, j'ai créé une voiture avec ce poids, hauteur, ce rayon de bordure particulier, un texte particulier au centre. Nous devons définir la hauteur largeur à partir desquelles le texte doit être placé. Voulons-nous qu'il soit aligné au centre, aligné à gauche et à droite, tous ces éléments seraient formés sous la forme d'un composant. Vous pouvez ensuite reproduire le fichier compétent dans d'autres pages Web ou dans cette page Web elle-même, mais avec un espacement différent. C'est donc l'avantage de vos styles et de vos composants. Essayons de voir comment nous pouvons réellement développer notre propre site Web ou un autre. Comment développer nos propres styles et compétences pour notre mise en page , n'est-ce pas ? Donc, tout d'abord, nous aurons besoin d'une marque. Logo. Donc, au hasard, j'ai choisi le logo de cette marque particulière sur Google. Comme vous pouvez le constater, ce logo a deux teintes. L'un est violet ou violet foncé, violet, et le second est rose, ou vous pouvez dire bordeaux, n'est-ce pas ? Je peux donc choisir ces deux couleurs et les utiliser dans mon style. Tout d'abord, vous devez installer une extension Chrome dans votre navigateur, savoir le sélecteur de couleurs. Vous pouvez donc simplement rechercher l'extension Chrome Color Picker, télécharger et installer dans votre Chrome, n'est-ce pas ? Une fois que vous aurez fait cela, vous verrez peut-être qu'il s'agit la notification contextuelle que vous pourriez recevoir indiquant que l'accès aux fichiers est nécessaire. Cela signifie votre fichier personnel, comme cette image particulière que j'ai téléchargée dans mon dossier et que je l' ai ouverte avec Chrome. Normalement, toutes les images de notre système sont ouvertes avec ImageViewer, comme une visionneuse de photos ou je ne sais pas ce qui se passe sur Mac. Donc, si vous ne voulez pas le faire, vous pouvez simplement ouvrir avec Chrome afin de pouvoir utiliser l' extension Color Picker pour sélectionner la valeur du code hexadécimal de cette teinte violette et bordeaux. Vous pouvez maintenant accéder aux paramètres , faire défiler l' écran vers le bas et choisir cette option, autoriser l'accès aux URL des fichiers. Une fois que vous avez activé cette option, vous pouvez fermer cette partie, revenir à ce logo, cliquer sur cette extension Chrome selon les spécifications et la faire glisser jusqu'à la couleur laquelle vous souhaitez choisir la couleur. Donc, à peu près à ce stade, je voudrais copier la valeur hexadécimale. Je vais donc simplement copier ma valeur hexadécimale à l'aide de contrôles. Ici, vous pouvez simplement cliquer sur ce bouton, qui permet de copier l'intégralité de votre valeur X. Retournez à votre Figma. Je vais créer un cadre de, disons, de la taille d'un bureau. Ça va ? Et une fois que j'aurai fait cela, ce que je vais faire, c'est créer une forme d'ellipse de 160 pixels de largeur 160 pixels de hauteur. Une fois que je l'ai fait, je vais y ajouter de la couleur, qui est une valeur hexadécimale. Permettez-moi donc d'ajouter et de vous assurer de supprimer le symbole de la livre ou le symbole du hashtag avant votre valeur hexadécimale et de cliquer sur Entrée. Maintenant, c'est ma couleur principale. Donc, si je veux le stocker sous la forme d'un style, vous pouvez voir cette icône à côté votre film ou de votre icône plus. Vous pouvez donc voir ce bouton à quatre points en particulier , qui est stylé. suffit donc d'y aller, de cliquer sur ce plus pour créer votre propre style et donner un nom à ce truc. Je vais donc juste donner cela comme principal. Très bien, et je vais choisir ceci comme style de création. Maintenant, je vais faire une réplique de cette ellipse, et maintenant je vais utiliser la différence de cette couleur entière. Et si le logo de votre marque n' a pas d'autre couleur ? Il n'a qu'une seule couleur, alors comment allez-vous créer une couleur secondaire pour votre design ? Vous pouvez utiliser Adobe Color. Nous l'avons déjà utilisé, n'est-ce pas ? Vous pouvez donc simplement accéder à Adobe Color et créer une barre oblique. Là-bas. Vous trouverez cet analogue, allez-y et collez la couleur primaire que vous souhaitez utiliser. Je vais donc simplement coller ma couleur primaire. Je vais appuyer sur Entrée et vous en verrez différentes nuances , n'est-ce pas ? Vous en verrez différentes nuances. Donc, en ce moment, il nous montre cette couleur, montre d'autres versions, pas des versions bordeaux. Si vous optez pour le monochrome ou le trièdre, complémentaire, divisé, complémentaire, à double fente, vous trouverez la palette de couleurs qui correspond à votre design. Tout dépend donc de votre conception, ce que vous souhaitez utiliser dans votre conception. Ça va ? Mais comme ce logo a deux couleurs différentes et qu'il correspond au design, je vais choisir cette couleur bordeaux et cette couleur violette. Encore une fois, allez simplement dans votre sélecteur de couleurs, décrochez. Et parfois, cette extension peut ne pas fonctionner. Dans ce cas, vous pouvez simplement revenir à votre extension ou cliquer sur cette extension. Je peux donc cliquer sur ces trois points et accéder à Gérer l'extension. Cliquez sur cet accès à, J'ai accès aux URL des fichiers. Actualisez-le, revenez en arrière, actualisez, sélectionnez Paramètres. Encore une fois, essayez de changer cela, revenez en arrière. Et maintenant, vous pourrez choisir cette couleur bordeaux. Copions cette valeur hexadécimale nous irons ici. Nous allons coller ça. Et tout d'abord, je dois réellement dissocier cela ou détacher mon style. Ce qui se passe généralement, c' est que vous créez un composant ou un composant non compétent, mais disons une forme, un élément ou n'importe quel élément. Vous y avez collé du style et vous avez créé une copie de cet article. Désormais, l'élément dupliqué aura exactement le même style que celui de l'article d'origine contenu. Si vous souhaitez réellement appliquer un style différent, ou si vous souhaitez créer un style différent à partir de l'élément dupliqué, vous devez d'abord faire correspondre le style de celui-ci. Vous pouvez donc voir ce bouton non lié ou une icône, il suffit de cliquer dessus. Maintenant, vous pouvez revenir au remplissage, au collage, au code hexadécimal de couleur, supprimer cette icône en forme de cendre, cliquer sur OK et créer le style, auquel je donnerais le titre comme titre secondaire. Cliquez sur Créer un style et une couleur secondaire a également été formée essaierez également de créer une autre ellipse avec une ellipse dégradée. Essayons donc de les dissocier. Ça va ? Maintenant, je vais faire ce que je vais faire au lieu de faire des choses solides. Créez un dégradé linéaire, un dégradé linéaire. Et maintenant, cette couleur sera bordeaux, et ce sera la mienne, cette couleur, cette couleur. Permettez-moi donc de copier cette couleur. Je vais donc simplement cliquer ici. Quelle est la valeur de la couleur ? Permettez-moi de sélectionner la valeur de la couleur. Je vais sélectionner la valeur de couleur et l'annuler pour qu'elle ait ce style principal. Allons ici. Sélectionnez Linéaire, revenez en arrière, collez la valeur, appuyez sur Entrée. Je ne sais pas pourquoi la couleur verte a-t-elle été sélectionnée ? Idéalement, il devrait sélectionner cette couleur, non ? Essayons donc de choisir ceci. Et oui, c'est ce que nous avons. Et je veux que cela se fasse de manière horizontale. Cela signifie que du bordeaux au violet, je veux que la forme aille de gauche à droite, quelque chose comme ça. C'est donc ce que nous voulons et ça a l'air cool. Voici donc le dégradé de ma marque. Je peux donner un nouveau style à ce truc. Donnons donc un dégradé de marque. Très bien, créons du style. Vous pouvez donc voir que nous avons créé trois styles de couleurs différents. Maintenant, qu'en est-il de notre prochaine couleur ? Dissocions donc cela. Donnons une couleur noire foncée. Quelque part, un peu comme ça. Faisons-en une copie. Donnons-en un autre. Essayons de changer sa transparence de 100 % ou disons 80 ou autre, disons 75 %. Très bien, alors de 75 à 50 %, disons. Passons donc à 50 %, puis à 50-25. Donnons ce chiffre à 25 %. Ensuite, de 25 à, disons 10 %. Puis de dix à, disons, 5 %. Nous avons créé ces différents styles. Essayons de les enregistrer en tant que style. Donc je vais le donner en cent noirs. Très bien, noir et rouge. Celui-ci était noir 75. Créons donc un style appelé Black 75. Celui-ci a du noir 50. Celui-ci en avait 50, celui-ci en avait 25 en noir. Celui-ci a un dix noir. Et celui-ci a du black phi. Très bien, ce sont donc styles différents que nous avons créés jusqu'à présent. Maintenant, imaginez que j'essaie de créer mon site Web. Encore une fois, je créerais un cadre de bureau. À l'intérieur, disons que je prends la couleur primaire car je peux choisir la couleur du document ou les couleurs locales. Des documentaires aux films locaux. Et maintenant, vous avez la possibilité de choisir. Vous voulez donc votre couleur primaire, votre couleur secondaire. Essayons de choisir notre couleur principale, non ? J'ai pris la couleur primaire. Disons que j'en ai, disons que nous formons une boîte rectangulaire. Ajoutons une couleur qui sera la couleur secondaire. Ajoutons également un bouton à ce truc. Ajoutons donc un bouton ici. Avec, disons, un dégradé. Mon dégradé. N'avons-nous pas créé un dégradé de style dégradé, un dégradé de marque ? Oui, nous l'avons fait. Et pourquoi ne puis-je pas le voir ici ? Revenons en arrière. Choisissez Remplir. Ou plutôt, je devrais dire, sélectionnez le dégradé de votre marque, n'est-ce pas ? Cela a l'air cool et n'a pas l'air si cool, comme si l'on considère que l' arrière-plan est de couleur violette. Essayons donc de manipuler pour obtenir le résultat souhaité. Ou plutôt je devrais sélectionner, je devrais sélectionner, vous savez, Créons un bouton, un bouton. Largeur du bouton, disons environ un rayon de 20. Très bien, ajoutons-y du texte. Disons que je veux que ce bouton soit noir, comme 25, noir 50, noir 75. Ça fait 75 ans ? Environ 75 ans, quelque part à l'intérieur. Ouaip. Et je peux aussi ajouter du texte à l'intérieur de ce truc. Permettez-moi donc d'ajouter un bouton ensuite. Bien. Maintenant, le texte de ce bouton, je voudrais le donner en 32 pixels. Deux pixels. Je veux que ce soit un peu audacieux. Utilisez une famille de polices Roboto avec le texte de la ligne centrale. Je veux que la hauteur soit automatique. Je veux qu'il y ait un certain espacement entre les lettres. Supposons donc que l'espacement du réseau soit environ cinq, 5 % de hauteur automatique. D'accord, nous allons laisser cette hauteur automatique. Et donnons-le également en tant que bit automatique. Bien. Ça a l'air plutôt bien. Voici donc mon bouton. Je crée ce genre de design. Ça va ? Maintenant, si je veux créer un composant de bouton, un composant comme la mise en page, alors comment puis-je le faire ? Si je veux que ce soit comme un bouton. Ainsi, peu importe le nombre de boutons que j'ai dans la conception de mon site Web, je peux les utiliser. Et que puis-je faire dans ce cas ? Je peux juste tout déplacer. Et en haut de la barre d'outils, vous verrez cette icône particulière, qui permet de créer votre composant. Vous pouvez même voir la touche de raccourci, qui est entièrement dédiée à la commande ou à la commande sur votre Mac, Alt dans votre Windows ou des options sur votre Mac et la touche K. Une fois que vous aurez fait cela, un composant sera créé. Ça va ? Un composant a été créé. Maintenant, ce composant est en fait un composant principal, ou vous pouvez dire qu' il s'agit d'un élément parent et non d'un élément enfant. Maintenant, qu'est-ce que je veux dire par parent et enfant ? Laisse-moi te montrer. C'est celui de mes parents, non ? Si je souhaite utiliser exactement le même composant dans d'autres pages Web ou dans d'autres cadres, ou disons dans ce cadre lui-même. Mais je veux le faire, je veux utiliser ce composant. Alors, comment vais-je m'y prendre ? Eh bien, j'utilise la commande D ou ancienne, touche Options de commande enfoncée et en utilisant ma souris pour en faire une copie. Non, je vais utiliser les actifs. Je peux simplement accéder à mes ressources dans le panneau des couches. Je rechercherai des composants locaux. Je trouverai aussi le texte du bureau et des boutons. Je peux juste le faire glisser et le placer ici. Maintenant, si, pour une raison ou une mon client découvre que je n'aime pas le texte de ce bouton. Je souhaite que le texte de ce bouton ait une couleur différente. Alors, comment vais-je m'y prendre ? Disons que mon design contient des centaines de boutons. Et le client dit que je veux changer la couleur de ce bouton. Dans tous les boutons, je souhaite changer la couleur à l'intérieur de mon bouton. Et ce changement devrait s'appliquer à tous les boutons de mon design. Alors, comment pourrais-je m'y prendre ? Je vais simplement sélectionner mon élément principal ou parent. Je vais revenir à cette couleur. Je vais le changer en dégradé. Et maintenant, vous verrez qu'un bouton de dégradé a été formé ici. Vous pouvez voir que c'est mon enfant. Si j'apporte des modifications à celui parent, tous les éléments auront ou plutôt refléteront les mêmes modifications. Hein ? J'espère que cela est clair pour vous tous. Et si je voulais créer des textos ou, tu sais, créer un style technique ? Alors, que vais-je faire dans ce cas ? Disons que je crée un texte de titre. Très bien, je vais sélectionner tout cela. Suivant. Je vais augmenter la taille à, disons que 40 ou 40 ne suffiront peut-être pas, alors 48. Très bien, je veux que ce soit, disons Joséphine Sans, à moitié audacieuse. Ça a l'air cool. Et c'est ce que je veux pour mon titre. Je peux donc sélectionner l'intégralité du texte. Je peux choisir celui-ci pour créer le style de mon texte. Je peux ajouter. Et je peux appeler Titre. Je peux en créer un. Une autre méthode consiste également à créer un corps de texte. Je peux donc simplement dire le corps du texte. Maintenant, ce qui se passe généralement, c'est que le corps du texte a généralement une petite taille de police, n'est-ce pas ? Il a une petite taille de police. Où est ma mère ? Maintenant, pour votre corps de texte, il se peut que vous ne voyiez pas les options de famille de polices. Vous ne verrez pas les options d'espacement des lettres , etc., dans le panneau des propriétés de conception. Tout simplement parce qu'à l'heure actuelle, Figma partait du principe que puisque nous avions créé une autre zone de texte, elle contiendrait le même style que le texte de notre titre. Encore une fois, vous devez maintenant dissocier ou détacher le style qu' il contenait précédemment. Et maintenant, vous pouvez en modifier le style. Donc, ce que je peux faire, c'est simplement réduire la taille de ce texte. Permettez-moi simplement de sélectionner Dissocier, changer le style à 24, passant d'un demi-bol à, disons, normal ou normal. Et gardons-le sur l'alignement gauche. C'est donc ce que j' ai fait correctement. Revenons ici. Disons que je veux le renommer pour en savoir plus. En savoir plus. Très bien, disons que ce cadre particulier dans le panneau des couches, je peux sélectionner sur mon bureau un cadre ayant la couleur, c' est-à-dire que je peux sélectionner la couleur. Je peux choisir, disons noir 25, 25. Vous ne verrez peut-être pas ce 25 noir simplement parce que la zone de travail de ma Figma est en mode sombre. Vous ne verrez donc pas les modifications. Donc, si je veux passer à quelque chose comme le black phi, idéalement je devrais le voir, car le black phi est de couleur claire. Voyons voir. Est-ce que nous voyons ? Non, nous ne voyons pas de lag phi en noir, n'est-ce pas ? Je vais donc devoir changer l'apparence de Chrome, Chrome du mode sombre au mode clair. Alors laisse-moi le faire. Eh bien, changer le thème de ma Figma n'a pas aidé. En gros, il vous suffit de cliquer sur la zone de travail, accéder à l'arrière-plan et de changer la couleur en gris. Au fait, si vous souhaitez faire passer votre Figma du mode clair au mode sombre, ou peut-être du mode sombre au mode clair ou vice-versa. Accédez simplement à cette icône figma, dans la liste déroulante , cliquez sur l'équipe des préférences et choisissez le thème que vous souhaitez, clair, foncé ou système. C'est donc ce que j'ai fait. Et maintenant, vous pouvez voir que ce cadre de bureau a également une couleur grise, n'est-ce pas ? Permettez-moi de zoomer un peu pour que vous puissiez le voir correctement. Nous allons donc sélectionner notre bureau, le bureau à encadrer. Encore une fois, nous allons sélectionner la couleur sur ce bureau car c'est du black phi pour le moment, n'est-ce pas ? Nous pouvons choisir le noir 50. Oui, 50 ans, ça a l'air cool. Qu'en est-il du noir 25. 25. Donc ça a l'air bien, mais 50 c'est beaucoup plus beau. Voici donc mon cadre complet. Très bien, disons que je parle de ce composant. J'ai cette question en particulier à suivre. Très bien, permettez-moi d'ajouter du texte à l'intérieur de ce texte. Ça va ? Je vais le faire. Ce que je vais faire, c'est ajouter du texte à l'intérieur. Disons que j'écris ce terme. Développement Web complet et complet. Développement Web Full Stack. Et je peux y ajouter du style. Alors, où est mon message ? Je peux ajouter du style. Je peux donc utiliser le titre, je peux utiliser le titre, et je peux simplement le faire glisser pour qu' il tienne quelque part ici. Où est mon corps ? C' est mon corps de texte. Permettez-moi de l'ajouter à notre nouveau textile et nous ajouterons du corps. Très bien, créons du style. Ça va ? Et ajoutons un style ici. Nous allons le donner sous forme de texte aléatoire. Donc, pour cela, je vais faire des plugins Lorem Ipsum. Bien, créons une zone de texte. Générez des phrases phi, cela suffirait. Maintenant, cela a automatiquement supposé qu'il utiliserait le style corporel. Pourquoi ça ? Parce que j' ai déjà créé ce style de corps. Il utilise donc maintenant le style corporel. C'est donc comme ça qu'il utilise réellement cet anti-truc. Si vous souhaitez reproduire l'intégralité de ces deux éléments, vous pouvez le faire. Tu peux t'en servir ici, non ? Tu peux t'en servir. Si vous souhaitez augmenter la taille de votre cadre, vous pouvez également le faire. Vous pouvez même ajouter une mise en page automatique, vous savez ce genre de choses. Changeons la couleur de ce rectangle particulier de secondaire à, disons que le site principal peut choisir de secondaire à principal. Ça a l'air bien. Nous pouvons voir que c' est ainsi que nous travaillons réellement avec les styles et les composants dans Figma. 23. Introduction aux effets et aux coups de Figma: Très bien les gars, commençons par les effets Figma et les troupes. Essayons donc de créer une boîte rectangulaire avec de la couleur. Disons vert. Cette teinte est jolie. Ça va ? Et si je voulais ajouter une bordure à cette boîte en particulier, disons, de couleur noire. Ensuite, en CSS, nous savons que nous pouvons donner une boîte, non ? Nous pouvons donner environ une boîte. En CSS, vous devez avoir appris boîte de contenu et la zone de bordure. C'est donc ce que nous allons examiner. Supposons que je veuille ajouter une bordure à cette boîte particulière, alors comment puis-je le faire ? Eh bien, si vous vous concentrez sur le panneau des propriétés de conception, vous verrez une option permettant d'ajouter un trait. Vous pouvez donc simplement ajouter. Et maintenant, vous verrez qu'une fine ligne de couleur noire a été ajoutée sous forme de bordure à notre boîte verte, n'est-ce pas ? La couleur est noire, l' opacité est la personne rouge. Et il y a environ une ligne. Maintenant, que signifie réellement cette seule ligne ? Donc, si je zoome dessus, si je zoome jusqu'au niveau où vous constaterez que Figma au cœur de ces petites boîtes, n'est-ce pas ? Il y a tellement de petites boîtes différentes. Maintenant, laissez-moi simplement faire défiler la page vers le haut voir combien de cases sont occupées par une bordure noire, afin que vous ayez une idée de la raison pour laquelle nous en avons une comme valeur ? Alors maintenant, vous pouvez le voir ici, vous pouvez voir que nous avons une boîte. Cela signifie donc que même si ma boîte rectangulaire, la boîte verte rectangulaire a 622 pixels de largeur et 320 pixels de hauteur. Cette bordure fait désormais partie de ma boîte rectangulaire. Ce n'est pas hors de mes sentiers battus. C'est dans ma boîte, non ? Vous pouvez voir que nous avons sélectionné à l'intérieur. Cela fait partie de ma boîte rectangulaire. Si j'augmente la taille de ma bordure, le rectangle , de couleur verte, essaiera de paraître plus petit. Donc, pour le moment, il n' occupe qu'une seule boîte. Si je le remplace par deux, vous verrez les boîtes à outils de ses occupants par rapport à y, car c'est notre tarif réduit, d'accord ? La largeur, ou vous pouvez dire, qui serait cette hauteur est la hauteur de la boîte augmente en fonction du chiffre que vous avez indiqué ici. Si je passe de deux à, disons, 20, alors évidemment, autant de boîtes seraient occupées, environ 20 boîtes. Voyons maintenant si notre boîte rectangulaire diminue réellement de taille ou non. Vous pouvez donc maintenant voir boîte rectangulaire apparaître mais plus petite qu'auparavant. Donc, si je change cela à 60, vous pouvez voir que le rectangle vert semble si petit. Mais si je change cela de l'intérieur vers l'extérieur, alors la boîte verte semble plus grande. Mais le rectangle, ou plutôt la bordure, qui est de couleur noire, se trouve maintenant en dehors de mon rectangle. C'est un rectangle extérieur. Il ne fait plus partie de cette boîte rectangulaire. C'est donc ce que cela signifie essentiellement. Si je change cela à nouveau à 20, vous verrez à quoi cela ressemble. Nous avons une autre option qui est le centre. À quoi ça sert ? Le centre signifie essentiellement qu'il s'agit d'une combinaison d' intérieur et d'extérieur. Ainsi, 20 boîtes sont également occupées à l'intérieur et à l'extérieur. Et le centre est formé par cette ligne bleue. Vous pouvez voir que c'est essentiellement ce que signifie réellement votre accident vasculaire cérébral. Vous pouvez modifier la couleur de la bordure si vous souhaitez qu'elle ait une couleur linéaire, vous pouvez également le faire. Permettez-moi de remplacer cela par, disons que cette couleur ne sera pas belle. Passons à quelque chose comme le rouge et l'autre couleur à, disons peut-être le jaune. Et donnons cette couleur. Mais ce genre d'ombre linéaire. Bien. Oui, ça a l'air bien, non ? Ça a l'air bien. Permettez-moi de le dire ainsi pour que vous puissiez voir correctement la couleur. Nous voulons que les deux couleurs soient à 100 %. Parce que vous pouvez voir ici, quand un informaticien, oui, maintenant ça a l'air bien. Et quoi d'autre ? Oui. C'est ainsi que vous pouvez également modifier la couleur de la bordure. Très bien, examinons quelques effets. Alors voyons voir. Je suis en train de créer une autre boîte. Maintenant. Je veux que cette boîte ait une sorte d'ombre. Dans leur panneau de propriétés de conception. Vous pouvez voir un bouton qui correspond aux effets. Une fois que j'aurai cliqué sur l'icône plus, vous aurez une ombre tombante. Il applique donc maintenant une forme d' ombre que vous ne pourrez peut-être pas voir pour le moment. Mais une fois que j'ai désélectionné cette forme particulière, vous pouvez voir des ombres se former au bas de ma boîte. Si je sélectionne à nouveau cette option, j'ai la possibilité de choisir la couche d'ombre intérieure, le flou d' arrière-plan, etc. Mais pour l'instant, concentrons-nous sur Drop Shadow. Je vais donc sélectionner cette icône. Je vais voir la valeur x, la valeur y. Qu'est-ce que cela signifie ? Cela signifie essentiellement la valeur de décalage. Si je change la valeur x de zéro à, disons, 12, alors de l'axe X par rapport à l'axe X, elle se déplace bien des pixels vers l'avant. C'est donc ce que cela signifie essentiellement. Initialement, la valeur de décalage X était fixée à zéro. Il n'y avait donc aucun décalage à droite ou à gauche ? Correct. Et dans le y, nous avons la valeur quatre. Donc, en bas, vous verrez une sorte d'ombre. Si je change à nouveau cela en 12, vous verrez une ombre apparaître, n'est-ce pas ? Il y a aussi un peu de flou. Essayons de supprimer Learn à partir de maintenant. Si je supprime le flou, que pouvez-vous voir ? Vous pouvez voir exactement la même forme se former, n'est-ce pas ? Lorsque vous traversez la rue où vous avez des lampadaires et une ombre se forme derrière vous. Alors, qu'est-ce que cela signifie ? L'ombre est serrée et a exactement la forme de votre taille. Donc, dans Figma, chaque fois que vous créez une ombre pour vos objets, vos éléments ou elle occupera exactement la même taille. Vous pouvez même modifier la couleur de l'ombre. Actuellement, il est réglé sur noir, 25 % de transparence. Mais si nous voulons que cela ait une certaine couleur, disons violet, ou disons une teinte bleutée, une couleur aigue-marine. Vous pouvez donc le faire. Si vous voulez un peu de flou, vous pouvez également en ajouter un. Vous pouvez donc voir que du sang a été ajouté à cette ombre particulière. Si tu veux que ça se répande. La diffusion signifie essentiellement que dans quelle mesure souhaitez-vous que votre ombre diffuse un effet de bavure ? Si vous le mettez 20, vous verrez qu'il a été taché de toutes les directions. C'est donc ce que signifie essentiellement une ombre tombante. Si vous passez d'une ombre déposée à une ombre intérieure, par exemple, vous verrez que l'ombre apparaît désormais à l'intérieur de notre élément. C'est mon ombre intérieure, regarderai le calque et le flou d' arrière-plan plus tard. 24. (23) Effet de texte dans Figma: Très bien les gars, laissez-moi vous montrer un effet de texte sympa que nous pouvons faire. Donc, ce que j' ai en tête, c'est que nous pouvons prendre une image pour jeter un coup d' œil à notre texte. C'est donc ce que j'ai en tête. Pour ça. Ce que je vais faire, c'est créer un cadre d' environ la même taille. La taille est bien trop grande. Essayons de réduire la taille à 1080 x 1080. Et la prochaine étape que nous aimerions utiliser est l'image. Voici donc notre cadre. Essayons d'apporter une image à l' aide de notre plugin Unsplash. Essayons donc d'apporter de l'abstrait. Voulons-nous un résumé ou un portrait ? Faisons un portrait. Et essayons de prendre ce type. Très bien. Essentiellement, voici ce qui se passe. Oui, c'est donc ce que nous voulions. Nous ne voulions pas que cette image soit exactement à l'intérieur de notre cadre. Nous voulons que cela soit fait manuellement. Maintenant, je vais placer cette image à l'intérieur de notre cadre. Maintenant, comment faisons-nous cela ? En accédant simplement au panneau Calques, vous pouvez faire glisser le calque d'image sous votre cadre. Maintenant, c'est dans le cadre. Vous pouvez simplement vous déplacer là où vous souhaitez que SMH soit. Si vous souhaitez manipuler cette image, vous pouvez également le faire. Cliquez simplement sur le remplissage. Vous pouvez simplement baisser la saturation si vous le souhaitez, augmenter la saturation, selon ce qui vous convient le mieux. Si vous voulez jouer avec l'exposition au contraste, allez-y. Mais cette image n'en a pas besoin, car il s'agit simplement de votre image en noir et blanc. Alors, prochaine étape, qu'allons-nous faire ? Essayons de créer un rectangle. Peut-être à peu près de cette taille. Et permettez-moi de zoomer sur environ 50 %. Oui. Et à l'étape suivante, permettez-moi également d'augmenter la taille de la boîte rectangulaire, un peu comme ceci. Oui. Ensuite, nous voulons que la couleur de cette boîte soit blanche. Très bien, essayons également de créer un texte dans cette zone. Nous pouvons donc dire quelque chose comme Figma. Figma l'est plutôt, Figma est géniale. Très bien, Sigma est génial. Et maintenant, je peux créer des designs d'interface utilisateur. Très bien, quelque chose comme ça. Et faisons également de cette zone de texte de hauteur automatique une hauteur automatique. D'accord, le style de police a un bon impact. Nous en avons 96, d'accord ? Si nous voulons augmenter la taille de cette boîte, nous pouvons également le faire. Très bien. On peut faire quelque chose comme ça. Oui. Et que voulons-nous ? Cette boîte rectangulaire blanche doit-elle rester telle quelle ? Mais ce texte doit également contenir l'image et un peu de flou derrière ce texte. Pour ce faire, nous pouvons placer une réplique de cette image en maintenant la cette image en maintenant touche Alt enfoncée, en la plaçant en haut. Voici à quoi cela ressemblerait. À l'étape suivante, nous voulons notre texte. Nous pouvons le sélectionner et nous pouvons l'utiliser, c' est-à-dire l'utiliser comme mosquée. Et voici à quoi ressemble notre résultat. Des trucs simples. Alors, que s'est-il passé ici dans ce cadre ? Ce texte agit maintenant comme un masque sur notre image. Et cette image est maintenant, ou plutôt cette boîte rectangulaire se trouve sur la couche supérieure de notre couche supérieure, pas la couche supérieure, mais plutôt sur la couche supérieure de mon image. Vous pouvez voir ici, c'est mon image montrant que nous avons une boîte rectangulaire. À l'intérieur de cette boîte rectangulaire, nous avons notre texte. Et le texte sert de masque à notre image. C'est ce que nous avons fait. Vous pouvez sélectionner ce texte. Accédez à, vous savez, vos effets, vous pouvez ajouter, vous pouvez ajouter de l'ombre. Si vous voulez une ombre, disons une couleur noire avec peut-être environ 50 % d'ombre. Flou pour être environ, disons dix X, dix Y pour Phi. Vous pouvez voir à quoi ressemblerait notre sortie. Vous pouvez voir que c'est ce que nous avons fait à l'aide des effets et des ombres Figma. 25. Effet de texte tranché: Très bien les gars, aujourd'hui je suis très excitée parce que maintenant je vais vous montrer des trucs de niveau professionnel. Donc, ce que nous allons faire, c'est découper notre texte et y ajouter de l'ombre. Donc, pour ce faire, essayons tout d'abord de créer un cadre de la taille d'un bureau. Ça va ? C'est donc notre dimension. Donnons de la couleur à notre bureau. Je vais donc donner de l'orange. Donnons une couleur orange, peut-être orange terne. Oui, ça a l'air bien. Ajoutons du texte à ce cadre. Je vais donc ajouter le texte qui est tranché. Et vous pouvez constater que la famille de polices j'utilise actuellement est affectée et que la taille de la police est de 300 pixels. Bien. Assurez-vous que le texte est centré, la fois par rapport à l'axe X et par rapport à l'axe Y. Notre texte apparaît donc parfaitement au centre. Maintenant, à l'aide de l'outil Pen, je vais découper le texte. Et maintenant, je veux le texte de telle sorte qu'il ait été découpé en diagonale. Et une certaine distance se forme entre ces deux diagonales, la diagonale en haut à gauche et la diagonale en bas à droite. Et l'espace est infime, bien que perceptible, mais cela ne change pas la donne. Et nous voulons y ajouter de l'ombre. Donc, pour ce faire, je vais utiliser mon stylo. Il vous suffit de sélectionner votre stylet. Ce que je vais faire, c'est le placer quelque part ici afin de pouvoir le découper directement en diagonale. Quelque part ici, en haut. Dirigez-vous vers la gauche pour qu' il corresponde à cette position. Amène-le quelque part ici. Cette partie de mon texte a donc été découpée. Maintenant, je vais sélectionner ce vecteur qui a été découpé avec ce texte. Et maintenant, ce que je vais faire, c' soustraire la partie sélectionnée. Vous pouvez voir que cela a maintenant été soustrait. La partie que j'ai réellement sélectionnée a maintenant été coupée en tranches et connectée. Maintenant, je vais tout d' abord sélectionner ce vecteur. Oups. Permettez-moi de sélectionner cette partie. Et ce que je voulais faire, c'est cette partie soustraite, non ? La partie soustraite, laissez-moi choisir ce vecteur. Je voulais donner ceci, supprimer le trait et je voulais qu'il soit de couleur grise. Vous pouvez donc voir que la partie a été désélectionnée ou qu'une partie de mon texte a été supprimée simplement parce que nous avons supprimé le trait. Très bien, donc c' est ma soustraction. Très bien, créons un doublon de notre soustraction. Très bien, je vais créer un doublon à l'aide de Control D. Maintenant, nous devons soustraire le premier qui a été découpé et le second qui est dupliqué. Celui qui a été tranché. Je vais le garder intact en le verrouillant. Et celui qui est juste ici. Ce que je vais faire ici, je vais l'étendre. Je vais choisir ce vecteur, je vais choisir cette couleur. Maintenant, à l'aide de cela, qui permet de modifier mon objet, je vais m'assurer que mon bouton Déplacer est sélectionné. Je vais choisir cette partie supérieure, qui est composée de trois, ces trois sommets , le premier, le deuxième et le troisième. Je vais donc simplement faire glisser et sélectionner cette partie. Maintenant, je vais le faire glisser vers le bas. Bien. Peut-être que cette partie, cette partie a été sélectionnée. Je vais choisir que c'est fait. Et maintenant, ce qui s'est passé, c'est que deux parties de mon texte ont été découpées. Le premier était le mien en haut à gauche et en bas à droite. Bien. Deux soustractions ont donc été effectuées. Alors maintenant, je vais choisir le vecteur. Ça va ? Je vais modifier la valeur de ma valeur de décalage X. Je vais augmenter la valeur de décalage X. Donc, si j'augmente en maintenant la touche flèche vers le haut enfoncée, vous verrez qu'elle se déplace légèrement vers la gauche. Si j'augmente la taille de ma valeur y. Ce qui se passe ici, c'est que la pièce bouge et forme une sorte d'espace vide, n'est-ce pas ? Certaines actions sont en cours. Ça va ? Maintenant, ce que nous voulons, c'est que je le fasse de cette façon. Maintenant, ce que nous voulons, c'est qu'à l'intérieur de celui-ci, cette partie fasse une copie de ce vecteur en maintenant enfoncé notre ancien. Ou si vous utilisez un Mac, vous pouvez utiliser la touche d'option et la placer juste ici. Très bien, créons également une ellipse d'environ cette taille. Et nous allons regrouper ceci, cette ellipse et ce vecteur, les deux, mais pour l' instant, nous voulons cette ellipse. D'ailleurs, cette ellipse serait jointe à notre vecteur. Ça va ? Cette ellipse doit avoir une couleur linéaire avec 100 % de noir et zéro  % de transparence en noir. Assurez-vous donc que les deux couleurs finales sont noires. Cela doit avoir 100 %, cela doit avoir une opacité de 0 %. Très bien, regroupons-les. Je vais donc sélectionner cette partie et cette partie en maintenant la touche Maj enfoncée. Et plutôt que de les regrouper, je vais les utiliser sous forme de masque. Et maintenant, je vais sélectionner ceci. Je peux sélectionner l'ensemble de ce groupe de masse ou une autre partie de l'ellipse. Je vais faire pivoter cet angle. Je vais donc le faire pivoter. Oui, je vais déplacer ça ici. Permettez-moi de modifier à nouveau la rotation. Laissez-moi sélectionner mon ellipse. Rotation. Oui, ça a l'air cool. Réduisons la taille de cette ombre. Un peu comme ça. Si je sélectionne mon ellipse, encore une fois, c'est exactement ce que nous voulions. Un design tellement cool. C'est ainsi que vous pouvez donner à votre design un aspect 3D et obtenir des effets tellement intéressants avec Figma. reste une dernière chose à ajouter pour que ce soit comme une cerise sur le gâteau. Cela reviendrait donc à ajouter de l'ombre à notre ombre sur cette ellipse particulière. Nous avons donc ajouté cette couleur de remplissage. Nous pouvons aller dans Effets, ajouter un peu de flou de couche. Et si je clique sur cette icône, nous pouvons changer la valeur du flou de quatre à, disons, dix. Si je le fais, vous verrez que c'est à cela que ressemblerait notre texte. Si vous souhaitez réduire la taille de notre flou. Tu peux le faire aussi. Et parfait. Voici à quoi cela devrait réellement ressembler. Si vous le souhaitez, vous pouvez remplacer le nom du cadre par celui de bureau par, disons, un effet de texte tranché. 26. (25) Outline Effet de texte: Très bien les gars, voyons comment créer un effet de texte de plan. Donc, pour cela, je vais créer un nouveau cadre d'environ cette taille. Et avant de créer un wireframe, vous savez quoi, ce que nous allons faire ? Nous n'apporterons qu'une image du plugin Unsplash. Essayons donc de trouver un animal. Ok, cette girafe a l'air cool. Je vais donc apporter celle-ci et nous allons essayer de supprimer l' arrière-plan de cette image. À l'aide du plugin Remove BG, je vais supprimer l'arrière-plan de cette image particulière. Maintenant, une fois l'arrière-plan supprimé, je vais juste faire un petit zoom arrière. Et à l'étape suivante, nous voulons un cadre. Créons donc un cadre d' environ 1920 x dix ADP. Ce sont tes pixels, non ? C'est notre format d'affichage. Donc 1920 x 1080 pixels, non ? Une fois que nous avons zoomé et que nous voulons que cette image soit à l'intérieur d' un cadre, c'est ce que nous voulons. Essayons d'abord d' aligner le centre ou d'effectuer un autre alignement, nous allons essayer de le redimensionner. Je vais essayer d'escalader cette girafe en particulier. Mais savez-vous quel est ce cadre, au lieu de 1920 x 1080 ? Faisons également en sorte que la largeur soit égale à zéro par 1080. Et essayons de ramener cette image pour essayer de la réduire. Encore une fois. Essayons de le redimensionner. Oui, ça a l'air cool. Nous allons essayer de zoomer pour qu'il apparaisse bien. Très bien. Nous allons essayer d' aligner le centre à l'aide de celui-ci. Ça a l'air cool. Nous donnerons également une couleur à notre cadre. Essayons donc de donner une couleur à ce cadre. Donc, pour donner une couleur à ce cadre, je vais m'assurer qu'il a été sélectionné pour le déplacer, sélectionner votre cadre, puis revenir au panneau des propriétés du design, passer à cette couleur, unie, pour trouver une couleur naturelle qui est évidemment le vert. Je cherche donc cette teinte de forêt et un côté un peu plus foncé. Ouaip, ça a l'air bien. Très bien, prochaine étape, nous voulons un texte, donc je vais apporter ma zone de texte. La taille Ça a l'air cool. Très bien, essayons de noter le texte du plan. Très bien, essayons de l'aligner au centre. À l'aide de cela, j' ai la ligne centrale, mon texte. Très bien, sachez ce que j'ai en tête pour esquisser ces deux textes, créer cet effet de type de plan. Ce que nous avons, c'est que nous voulons que cette image soit massive de telle sorte qu'elle ressemble à cela. L'image a été masquée et le texte contient cette image. Mais nous n'utilisons pas la méthode de masquage. Nous allons plutôt utiliser la méthode des grandes lignes et nous allons voir une petite astuce. Donc, comme vous pouvez le voir ici, nous avons ce texte et je vais en faire une réplique. Je vais donc maintenir mon bouton Alt enfoncé et le faire descendre en dessous de mon image. Maintenant, ce qui se passe ici, c'est qu'il y a une couche de textes, qui concerne mon image, et une couche de texte qui se trouve derrière mon image. Il y a donc deux couches. Un autre qui est à l'avant, nous voulons le cacher. Donc pour cela, je vais simplement supprimer la couleur. Et une fois la couleur supprimée, vous ne verrez évidemment pas le caractère du texte car il est désormais invisible. Bien que le texte soit présent, il existe une déclaration de revenus, qui est une ébauche de textes. Mais comme il n'a aucune couleur, comment allez-vous semer ? C'est donc ce qui se passe ici. La prochaine étape, ce que nous voulons, c'est ce texte particulier qui figure au premier plan. Nous voulions donner quelques grandes lignes. Je vais donc ajouter un trait. Et dès que j'ajoute un trait, vous pouvez voir l'image qui se trouve à l'intérieur de mon texte. Maintenant, je vais changer la couleur de mon trait, vous savez, pour qu'il soit également blanc. Avoir une cellule phi. Nous voulons que cela se trouve à l'intérieur et voici à quoi ressemblerait notre texte. Donc, sur la première couche du texte, qui apparaît au début de mon image. C'est ne pas avoir de texte. Il n'a qu'une bordure. Bordure. Quand il a une bordure et qu'il n'a aucune couleur. De toute évidence, vous verriez l'image. Maintenant, derrière cette image. Qu'est-ce que tu as d'autre ? Le même texte de la même couleur. Donc, cela se présente comme si, vous savez, cela vous donnait l'illusion que vous avez masqué votre image. C'est donc ce qui se passe ici. Sinon, c'est assez simple. Nous n'avons rien fait ici. Nous avons donc fait deux choses simples. Tout d'abord, nous avons utilisé notre image à l'intérieur du cadre. Ils ont mis une couleur à notre cadre. Ensuite, nous avons utilisé deux couches de notre texte. Celle qui se trouve au début de mon image, n'a pas de couleur mais seulement un trait, qui est à nouveau de la même couleur que la couleur de mon texte. Et la couche de texte qui se trouve derrière mon image n'a pas de bordure. Il n'a que de la couleur de fond. Cela donne donc l'illusion que l'image a été masquée. 27. Effet d'icône brillant: Très bien les gars, voyons comment créer des effets d'icône bleue. Donc, pour cela, je vais créer un nouveau cadre de la taille de la publication Instagram. Faisons en sorte que cela soit plus foncé ou noir. Maintenant, nous allons importer l'icône Instagram. Maintenant, pour ce faire, je vais utiliser le plugin when, qui est en fait une icône de police ou un plugin Font Awesome Vous pouvez simplement trouver d'autres plug-ins et rechercher les icônes Font Awesome de I conduct. Il suffit de l'exécuter et de rechercher l'icône que vous recherchez. Ce que j'ai en tête, c'est que nous utiliserons l'icône Instagram et nous la modifierons de telle sorte qu'en utilisant les effets et les ombres que nous avons appris jusqu'à présent, je vais la faire apparaître comme si elle brillait. Très bien, alors utilisons simplement ce logo Instagram. Très bien, essayons d' aligner son centre. Ligne centrale. Cela doit être aligné au centre. Sélectionnez-le quelque part ici. Ça va ? Et essayons également d'en augmenter la taille. Disons 200 par 200. Ou vous pouvez simplement le verrouiller de sorte que si vous modifiez la taille de votre largeur ou de votre hauteur, l'autre dimension change d'elle-même respectivement. Donc, si vous voulez que ce soit 250, vous pouvez le faire. Ça a l'air bien. Sélectionnez cela. Et nous allons changer la couleur de notre icône du noir au blanc afin qu'elle soit visible. La prochaine étape que nous voulons est, vous savez, la prochaine étape dont nous aurons besoin est d'essayer d'utiliser des effets d' ombre. Nous allons donc cliquer sur les effets. utiliserons d'abord un flou de couche, ou plutôt je devrais dire la première ombre intérieure que nous utiliserons. Maintenant, à l'intérieur de l'ombre, ce que nous voulons, c'est qu'il n' y ait pas de décalage, n'est-ce pas ? Il ne devrait pas y avoir de compensation. Nous ne voulons pas que l'ombre soit en dehors de la plage donnée. Elle doit apparaître telle quelle, comme notre icône Instagram a la même dimension, elle ne doit pas être décalée par rapport à l'axe X ou Y. C'est pour cela que nous voulons que le sang soit coupé d'environ 20 pixels. Et la couleur dont nous allons avoir besoin est la couleur violette ou violette. C'est ce qu' utilise Instagram, n'est-ce pas ? Quelque part autour de cette teinte. Et nous voulons que ce soit 100 %, 100 %. Et c'est la couleur que nous allons utiliser. La prochaine étape dont nous aurons besoin est d'avoir besoin d' une autre ombre, votre ombre tombante. Utilisez donc l'ombre tombante. Encore une fois. Faites en sorte que le décalage soit égal à zéro. Faites en sorte que le flou soit égal à 50. Essayons-le avec 50. Changez la couleur pour obtenir exactement la même couleur, qui est la couleur que nous avons réellement utilisée. Envoyez les couleurs du document. Vous le trouverez ici. Et c'est ce que nous voulions et que le flou soit à 5 000 %, n'est-ce pas ? Maintenant, je vais faire une copie de cette icône Instagram. Il suffit donc d'en faire une copie. Donc, pour ce qui est des icônes Instagram que nous avons, vous pouvez le voir, ne cliquez pas sur ce vecteur. Cliquez sur cette icône, Instagram, qui est un groupe. Très bien, c'est celui que nous avons réellement utilisé, et voici la copie. Donc, à l'intérieur de la copie, je vais supprimer toutes les ombres. Ce que je vais utiliser, c'est juste mon coup de cœur. Il suffit donc d'ajouter un trait, faire en sorte que le trait soit de couleur blanche. Faites en sorte que cette taille soit d'environ cinq pixels. Et la couleur que nous allons utiliser à la place du blanc. Utilisons la même couleur de document. Et maintenant, vous pouvez voir ce type d'effet gluant. Enfin, avant de terminer ce didacticiel, la seule chose que vous devez faire est de supprimer la couleur de fond et d'ajouter des effets, savoir le flou de la couche. Il suffit donc d'ajouter une couche de flou et de faire environ cinq gouttes de sang. Que se passera-t-il si nous augmentons ce chiffre ? Vous verrez que le flou qui entoure l'objet est ce que nous verrons si je l'augmente. Ça va ? Donc, si tu veux que ce soit cinq, ça aurait l'air cool. Et c'est ainsi que vous créez des effets d'icônes éclatants. 28. (27) Mini projet: Très bien les gars, aujourd'hui je suis très excitée parce que maintenant nous allons nous pencher sur de très bonnes choses. Parce que nous allons créer un mini-projet. Maintenant, ce mini-projet que nous allons créer n'est qu'un simple en-tête. Vous pouvez également voir une page de destination pour votre site Web. Et nous n'allons pas entrer dans les détails. Papa, quel type de topographie, quel type de famille de polices, quel type de palette de couleurs devriez-vous utiliser pour votre design Figma. Mais nous allons plutôt simplement examiner comment placer nos objets et comment les organiser avec ce que nous avons appris jusqu'à présent. Donc, pour cela, je vais simplement créer un cadre de la taille d'un bureau. Et je veux qu'il soit éteint sur le MacBook Pro 14 pouces. Nous pouvons donc sélectionner cela. Et laisse-moi juste dézoomer un peu. D'accord, pas tant que ça. 50 %, ce serait bien. Oui. La prochaine étape que nous voulons est de nous assurer que, vous savez, nous pouvons y ajouter une mise en page. Donc, pour cela, assurez-vous d'aller ici. Assurez-vous donc d'aller ici et de vous assurer que les grilles de mise en page ont été collées. La prochaine étape est de cliquer simplement sur cette grille de mise en page et vous verrez également toute la grille de disposition qui se trouve dans les colonnes et les lignes, mais nous voulons juste nos colonnes. Donc, pour cela, nous allons simplement utiliser celle-ci, c'est-à-dire nous allons simplement utiliser celle-ci, que je vais sélectionner cette icône. Je vais choisir entre la grille et les colonnes uniquement. Une fois les colonnes sélectionnées, le nombre de colonnes sera modifié de 5 à 12. Si vous souhaitez également changer la couleur, vous pouvez la remplacer par, disons, au lieu du rouge, vous voulez quelque chose comme le bleu clair qui au lieu du rouge, vous voulez quelque chose comme ressemble à cette couleur. Vous pouvez donc le faire. Prochaine étape. Ce que nous allons faire, c'est obtenir une sorte de marge entre la première colonne de notre grille et la dernière colonne de notre grille. Nous allons donc ajouter de la marge. Sélectionnez, disons que je souhaite ajouter une marge d' environ 50 pixels. Je peux donc le faire. Eh bien, cela ne semble pas bon pour notre projet, nous pouvons donc le modifier à, disons, peut-être 100. Maintenant, ça a l'air bien. Mais si je le changeais à nouveau en 125, quelque chose comme ça. Ça a l'air plutôt cool. La prochaine étape consiste à espacer les gouttières. Maintenant, ce qu'un bon espacement signifie essentiellement , c'est que l'espacement, l'espace supplémentaire entre les deux grilles de mise en page, se trouve entre les deux colonnes de mise en page. Cet espace où mon curseur plane est mon espace de gouttière. Je pense que l'espace dans les gouttières est de 20 en ce moment. Si nous changeons cela à, disons peut-être 30, ça a l'air bien. Nous pouvons donc en faire 30. Prochaine étape. Qu'est-ce qu'on va faire ? Je vais juste zoomer un peu pour que tu puisses voir. Très bien, à l'étape suivante, nous voulons créer une barre de navigation. Donc, pour cela, je vais créer une boîte enchevêtrée par le fournisseur en partant de ce coin jusqu'à cette liste afin qu'elle s'attache correctement. Permettez-moi de m'assurer que cela touche également cette ligne. Et nous veillerons à ce que la hauteur ne soit que de 100. Très bien, allons-y, augmentons ce chiffre à 200. Non, non, ce serait beaucoup trop. Je pense donc que cent 2 000, c'était bien. La prochaine fois, nous voulons étendre cela jusqu'à ce point. La prochaine étape, qu'allons-nous faire ? Nous voulons placer notre icône ici et les autres éléments du menu ici. Donc, pour cela, je vais utiliser mon plug-in. Si vous avez créé votre icône, vous pouvez simplement l'afficher, ou si vous souhaitez créer votre propre logo, vous pouvez également le faire dans Figma. Il suffit donc d'utiliser cette icône Font Awesome. Et je peux rechercher n'importe laquelle des marques. Disons que je souhaite utiliser des marques célèbres comme LinkedIn. Utilisons donc cela. Utilise ça. Et nous allons nous assurer que cette icône a une hauteur de six pixels et une largeur de 36 pixels. Je vais donc juste utiliser ces 36 pixels de hauteur et 36 cellules B et humide. Très bien, 36 par 36. C'est bien trop petit en fait. Changeons cela de 50 par 50. Oui, ça a l'air bien. Et si je changeais cela de 50 par 50 à peut-être 60 par 60. Oui, ça a l'air bien. 60 x 60 est donc la taille idéale que j'utiliserais réellement dans mon projet. Maintenant, cela dépend en fait de l'apparence de votre design. Il n'existe pas de règle stricte selon laquelle vous devez utiliser 60 pixels hauteur et de largeur pour toutes vos icônes dans votre conception Web. Il vous suffit de jouer et de voir s'il correspond à votre design sur commande. La prochaine étape, qu'allons-nous faire ? Nous allons nous assurer qu' il est aligné au centre par rapport à l'axe Y. Je vais donc simplement sélectionner ceci, qui consiste à aligner les centres verticaux. Très bien, la prochaine étape que nous voulons est d' utiliser notre menu. Donc, en appuyant simplement sur mon Tiki, je peux réellement écrire, disons à la maison. Domicile. Ensuite, j'ai la page sur les services de Dan et la page de contact. Voici donc les différents éléments du menu de navigation. La maison est donc celle que je vais sélectionner. À l'étape suivante, je veux que la taille du texte soit d' environ, disons que 36 pixels semblent visibles. Nous allons donc continuer avec 36 pixels. Utilisera un support. Medium a l'air bien. Et la famille de polices que nous devrions utiliser est la suivante : si j'utilisais quelque chose comme Let's keep this stagiaire ? Ça ne me dérange pas d'utiliser celui-ci. Eh bien, je m'en occuperai ensuite. Je vais en faire une copie. Je vais changer le contenu de la page d'accueil à environ dix, de la page sur le point de nous contacter. Communiquez avec nous. Enfin, j'utiliserai les services. Des services. Ça va ? Maintenant, la raison pour laquelle j'ai utilisé ces différentes zones de texte et je les aligne dans des directions différentes. Vous pouvez voir que celui-ci est en bas, il se trouve en haut de la maison. C'est encore une fois en bas. C'est encore une fois au top. Un tel alignement n'est pas en cours. Nous pouvons donc le faire. Ce que vous devez faire, c'est simplement sélectionner tous ces éléments et transformer en un groupe, pas exactement un groupe. Vous n'êtes pas obligé d'utiliser la commande G ou la commande G. Ce que vous devez faire, c'est utiliser celle-ci. Une fois que vous avez fait cela, vous pouvez réellement ajouter une mise en page automatique. Une fois que vous avez ajouté la mise en page automatique, votre travail est terminé. C'est donc ce que tu as fait. Maintenant, faites simplement glisser tout ce cadre et placez-le ici. Maintenant, pourquoi l'avons-nous placé ici ? Pourquoi avons-nous veillé à ce que l'option Contactez-nous reste dans cette partie de ma mise en page, car nous voulons que la dernière partie de la colonne de mise en page touche le dernier élément de menu. C'est donc ce que nous avons fait ici. Et sur l'icône bleue que vous avez vue précédemment et sur laquelle j'ai cliqué, il ne restait plus qu' à former un cadre. Nous venons donc de faire une sélection de cadres. Vous pouvez le faire à l'aide du bouton droit et vous pouvez également utiliser la sélection de cadres. existe donc rien de tel en matière de fusées et de science des fusées. Que la prochaine étape que nous voulons faire est de masquer notre rectangle. Nous ne voulons pas que cela apparaisse sur notre site Web. Donc, pour cela, si vous le souhaitez, vous pouvez l'utiliser et vous pouvez simplement ajouter une ombre floue et utiliser de la transparence pour cette barre de navigation en particulier. l'étape suivante, nous voulons nous assurer que celui-ci et celui-ci sont tous deux alignés verticalement. Nous allons donc simplement nous assurer que les deux sont alignés verticalement et nous allons simplement masquer notre boîte rectangulaire. Une fois que vous l'aurez masqué, voici quoi ressemblerait notre côté gauche. Très bien, à l'étape suivante, puisque nous essayons en fait de créer un seul projet, un mini-projet veillera à ce qu'il soit réactif. Cela signifie que même si la taille de mon mouillé change, d'accord, si je passe d'un MacBook Pro à un appareil mobile, par exemple, le contenu ne doit pas être oublié ou il ne doit pas être découpé. Alors, pour nous assurer que cela ne se produise pas, qu' allons-nous faire ? Nous allons sélectionner notre icône, cette icône LinkedIn. Et dans la partie contraintes, dans la partie contraintes, je devrais voir la partie contraintes. Je vais donc ajouter une mise en page automatique. Une fois que j'aurai ajouté la mise en page automatique, vous verrez ces contraintes et ces éléments de redimensionnement. Donc, sur l'axe Y, nous voulons que cela étende d'autres objets. Et à partir de l'axe X, nous voulons que cela soit fixé dessus. Ça va ? La prochaine étape, ce que nous allons faire c'est de nous assurer que notre design est réactif, est-à-dire si je passe de la taille de l'écran du MacBook Pro à, disons, celle d'un appareil mobile. Je ne veux pas qu'une partie de ma portion soit supprimée. heure actuelle. Notre design n' est pas réactif. Que se passera-t-il si je réduis la largeur de mon site Web ? Ensuite, vous verrez qu'une partie du contenu de mon menu est omise. Vous ne pouvez pas voir clairement la section Nous contacter. Même si je réduis cette humidité de cette partie à cette partie, vous verrez l'icône du lumen se trouver en dehors de mon cadre. D'accord, cela ne fait pas partie de mon thème, donc nous allons simplement l'intégrer à celui-ci. Et une fois que vous l'avez fait, vous pouvez voir que cela a été omis. Donc, ce que je vais faire, c'est simplement annuler pour obtenir la taille. Encore une fois. Il s'assure que l'icône se trouve à l'intérieur d'un cadre, le cadre du MacBook Pro. Et pour vous assurer que nos designers sont réactifs, il suffit de cliquer sur ce cadre en particulier. Ça va ? Pour le moment, vous ne verrez pas la partie sur les contraintes. Vous verrez la partie de redimensionnement car nous avons utilisé la mise en page automatique. Il suffit donc d'utiliser le bouton droit de la souris, d' utiliser une sélection de cadres et vous pouvez voir qu'un nouveau cadre a été formé. Je peux donc simplement renommer ce cadre en éléments de menu. Et maintenant, vous allez voir que ce cadre va nous imposer des contraintes. Maintenant, je peux dire qu'en abscisse, je veux que ces éléments de menu restent sur le côté le plus à droite. Et sur l'axe Y, il doit rester sur le côté supérieur. Alors maintenant, si j'essaie de réduire la taille de mon cadre, vous verrez que les éléments du menu ne sont pas compressés. Mon icône a plutôt été compressée. Nous verrons donc comment corriger également cette icône. Encore une fois, cliquez dessus avec le bouton droit de la souris. Utilisez la sélection de cadres. Changez le nom du cadre. Nous pouvons le changer en icône. Icône. Vous pouvez voir le logo. Vous pouvez simplement le renommer en no-go. Très bien, une fois que vous avez fait cela, restez à gauche et en haut. Maintenant, si j'essaie de réduire la taille de mon cadre, vous pouvez voir que mon logo ne se compresse pas. Très bien, c'est ainsi que nous l'avons rendu possible. La prochaine étape que nous voulons est un texte de titre et un corps de texte. Et en dessous, nous voulons un bouton. Et à côté de cela, sur le côté droit, nous voulons placer une image. Donc, pour cela, je vais utiliser du texte. Et tu sais quoi ? Je vais simplement utiliser une zone de texte. Dans cette zone de texte, je vais coller les éléments que j'ai déjà utilisés. Je vais donc copier ce texte, qui consiste à démarrer votre propre parcours professionnel aujourd'hui. Collez-le ici, assurez-vous qu'il utilise ce mouillage automatique. Et la prochaine étape que nous voulons est, je dois dire, la prochaine étape que nous voulons. Cela garantit qu' il fait 36 pixels. Si vous voulez que ce titre en ait 40, vous pouvez également le faire. Faire preuve d'audace. Tu peux le faire aussi. Vous voulez un autre style de police. Allez-y, faites-le. Je ne le ferai pas. Il suffit de sélectionner celui-ci. S'assure qu'il touche cette partie. Ça va ? Assurez-vous que ça colle. Cette partie en particulier. Nous allons créer une autre zone de texte. De cette partie à peut-être, disons que cette position va coller le reste de la suivante, qui est mon corps. Sélectionnez donc ceci. Encore une fois. Nous en utiliserons 36. Vous pouvez utiliser vos styles, vous pouvez, vous pouvez enregistrer le style et vous pouvez l'utiliser dans d'autres parties de votre conception. Faites en sorte que cela soit normal, régulier. Oui, c'est ça. Je vais donc m' assurer que cette zone de texte a une hauteur automatique. Nous allons donc le faire. Et assurons-nous simplement qu'il y a un espacement qui justifie la distance entre votre titre et le corps du texte. Très bien, la prochaine étape que nous allons faire est d'utiliser notre bouton. Donc, pour créer un bouton, je n'utiliserai pas de boîte rectangulaire. Je vais plutôt utiliser une zone de texte. Je vais donc simplement utiliser les textes qui commencent maintenant. Et pour le faire apparaître comme un bouton. Pourquoi utilisons-nous ? Tout d'abord, pourquoi utilisons-nous cette zone de texte comme un bouton et non comme une zone rectangulaire afin de rendre notre bouton réactif Donc, ce que je vais faire, ajouter une mise en page automatique à ce bouton. Je vais simplement sélectionner ceci. Je vais ajouter une mise en page automatique. Désormais, vous ne verrez plus l'option permettant d'ajouter une mise en page automatique directement aux œuvres de texte. Tout d'abord, vous devez ajouter la sélection de cadres. Il suffit donc d'utiliser la sélection de cadres. Et maintenant, vous verrez une option pour ajouter une mise en page automatique. Une fois que vous avez fait cela, assurez-vous qu'il s'agit de la ligne médiane. Ensuite, vous fournissez du rembourrage, que vous le vouliez ou non. Donc, pour cette conception, je vais fournir un rembourrage horizontal. Donc, à partir des positions gauche et droite, nous voulons 30 pixels de rembourrage et, à partir du haut et du bas V1, 15 pixels de rembourrage. C'est ce que j'ai fait. Maintenant, ajoutons une couleur. Je veux donc que la couleur soit à peu près ça, un bouton d'appel à l'action positif. Cette couleur semble donc bonne et la couleur du texte serait un octet. Nous allons donc sélectionner cela. Si vous souhaitez ajouter un rayon de bordure, vous pouvez également le faire. Essayons donc également d'ajouter un rayon de bordure. Permettez-moi donc d'en ajouter 20. Une fois que j'ai fait cela, ce que je peux faire, c'est simplement sélectionner ceci. Je vais le placer. Et vous pouvez voir que la distance entre ce corps de texte et mon bouton est de 61 pixels, et que la distance entre mon titre et corps est également de 61 pixels. Nous allons donc le laisser comme ça. Et je vais m'assurer que les contraintes sont gauches ou droites. Il colle à la partie la plus à gauche. Et en fait, c'est une contrainte, c' est en fait une largeur fixe. Ça va ? Une fois que vous l'avez fait, qu' est-ce que je veux dire par réactif ? Mais après avoir créé le bouton réactif , oui, bien sûr. Donc, si je prolonge ceci, laissez-moi simplement le prolonger. Vous pouvez voir que peu importe l' augmentation ou la diminution de la taille de mon bouton, le texte, qui est enseigné maintenant, reste toujours en position centrale et le rembourrage est maintenu constant. C'est donc ce que cela signifie essentiellement. Très bien, la prochaine étape, ce que nous voulons faire, c'est que si je me permets d'abord d'essayer de renommer ce cadre. Je vais donc simplement renommer ce cadre en bouton. Celui-ci sous forme de corps de texte. Donc, du rhénium deux, mon corps. Prochaine. Celui-ci en tant que texte de titre. Très bien, sélectionnons-les tous les trois. l'étape suivante, nous voulons nous assurer que les contraintes de gauche et de droite sont sélectionnées. Ça va ? Et maintenant, nous voulons ajouter une sélection de cadres. Une fois que vous les aurez ajoutés dans un cadre, qu' allons-nous faire ? Nous veillerons à ce qu'il respecte les contraintes de gauche et de droite. l'étape suivante, dans ce deuxième cadre, nous avons notre corps de texte et nos balises de titre. Il suffit donc de sélectionner le texte du titre. Et à l'intérieur de celui-ci. Tout d'abord, sélectionnons l'ensemble de ce cadre. Fais. Ajoutons également une mise en page automatique. Nous allons ajouter une mise en page automatique. Une fois cela fait, assurez-vous que les contraintes ne seront plus visibles à gauche et à droite. Il suffit donc d'utiliser la gauche. Une fois que vous avez fait cela, sélectionnez votre titre. Et dans la partie sur les contraintes ici, pour ma contrainte horizontale, le redimensionnement horizontal, vous devez utiliser le conteneur complet. Maintenant, pourquoi devrions-nous utiliser un conteneur plein ? Donc, si j'essaie de réduire la taille de mon cadre, vous verrez ce terme. heure actuelle. Vous ne verrez pas le changement. Donc, si je sélectionne ce conteneur complet, si je m'assure que, vous savez, c' est le cas, il l'utilise. D'accord ? Modifions-la également en largeur fixe. Maintenant, si j'essaie de réduire la taille de mon cadre pour le moment, vous ne pourrez pas voir le texte de ce titre ajusté en fonction de la taille de mon cadre. Alors pour cela, qu' allons-nous faire pour cela ? Nous sélectionnerons le texte de notre titre assurerons qu'il est défini comme contenant complet. Et sur l'axe Y, il est réglé sur le contenu du moyeu. Maintenant, pourquoi Hub contient ? Je vais vous le montrer dans une minute. C'est donc ce que nous voulons pour le sommet. Nous voulons que ce soit, encore une fois, un contenant plein. Une fois que nous avons fait cela, assurez-vous que celui-ci a une largeur fixe. Ça va ? Sélectionnez l'ensemble du cadre vers la gauche, puis de nouveau vers la droite. Et puis la partie suivante, ce que nous voulons, c'est sélectionner votre cadre, essayer de le redimensionner. Maintenant, vous pouvez voir les textes du titre et le sommet s'ajuste en fonction de la taille de mon cadre. Il réduit donc sa taille. C'est à cela que cela ressemblerait sur les appareils mobiles, c'est exact. Maintenant, qu'est-ce que je veux dire par Hub contient votre redimensionnement. Que signifie essentiellement cette propriété ? Disons donc mon corps de texte, je copie ce texte et je l'ai placé quelques fois de plus comme ça. Et cela, lorsqu'il possède également un bouton, il maintient cette distance, 61 pixels de distance d'ici et d'ici. Cette propriété contient essentiellement des propriétés lorsque vous parlez de redimensionnement. Très bien, c'est ainsi que vous créez réellement votre design réactif. Jusqu'à présent, nous avons fait la seule chose qui vous reste c'est de savoir si vous voulez réellement utiliser une image. Donc, si vous souhaitez utiliser une image, nous n'avons pas cet espace pour l'image. Donc, ce que nous pouvons faire, c'est sélectionner notre titre et le mettre comme ceci. Nous pouvons sélectionner notre corps de texte et augmenter la taille de la hauteur, la hauteur de notre zone de texte. Oui, ça aurait l'air cool. L'étape suivante consiste à importer une image. Donc, avec l'aide de mon plugin Unsplash, je peux réellement utiliser n'importe quelle image. Essayons donc d' apporter une image, disons liée aux affaires. Je vais donc sélectionner cela. Je vais chercher un entrepreneur. Et j' espère en voir un qui essaie réellement de les présenter à ses clients. Donc celui-ci a l'air bien. Et c'est une très bonne image que nous pouvons utiliser dans notre conception. Ainsi, une fois cette image importée, nous pouvons la redimensionner à l'aide de l'outil de redimensionnement. Nous allons donc le redimensionner. La taille permet simplement de s'assurer qu'elle correspond correctement à notre contenu. Pourquoi ne puis-je pas le louer dans le cadre de mes réseaux ? Très bien, cette image doit donc se trouver à l'intérieur d'un cadre de MacBook Pro. Nous allons donc essayer de le placer dans le cadre d'un MacBook Pro. C'est dedans. Essayons de nous ajuster à nouveau. Et maintenant, ça aurait l'air bien. Oui, ça a l'air bien. Assurez-vous simplement qu'il adhère à cette partie. Très bien. Nous pouvons également nous assurer qu'il est aligné au centre par rapport à l'axe Y. C'est ce que nous avons fait. Il est maintenant au centre. Donc, la prochaine chose à faire, je vais simplement changer cela en image. Et pour que cette image soit réactive, je vais m'assurer que les contraintes sont deux, à gauche et à droite. Il suffit donc de sélectionner cette image, s'assurer que les contraintes sont à gauche et à droite. Et nous essaierons de réduire la taille pour voir si cela fonctionne correctement ou non. Vous pouvez donc voir que notre image est également réactive et que ce texte est également réactif. Vous pouvez maintenant voir une sorte de chevauchement entre ce texte et l'image simplement parce que l'espace de données supérieur à ce que nous aurions dû utiliser. Et c'est la raison pour laquelle vous voyez ce genre de choses. Voici à quoi cela ressemblerait sur ma GoPro 14 pouces. Vous pouvez donc simplement, en fin de compte, supprimer la disposition en grille. Et voici à quoi ressemblerait votre site Web. 29. (27) Animations et prototypage à Figma: Très bien les gars, maintenant que vous avez tous appris à créer un mini-projet, allons-y et voyons comment créer des flux interactifs à l'aide de Figma. Désormais, lorsque vous créez des designs dans Figma, il est important de donner au client ou l'utilisateur le champ dans lequel il utilise réellement le logiciel, pas seulement la partie de conception. Nous avons donc besoin d'animations pour ces flux, n'est-ce pas ? Pour que l'utilisateur obtienne le champ dans lequel, d'accord, ce design est interactif. Lorsque je clique sur ce bouton, ou peut-être lorsque je passe la souris sur certains éléments, ou lorsque je glisse sur certains objets, je peux voir d'autres éléments. C'est donc ce que nous allons apprendre dans la conférence d'aujourd'hui. C'est à cela que sert le prototypage. Donc pour cela, ce que je vais faire, c'est créer un nouveau cadre de la taille d'un iPhone 14. Créons donc rapidement quelques éléments de base. Je vais créer un texte disant qu'il s' agit d'un protocole de prototypage Typing. Essayons d'aligner le centre. Très bien, en ce qui concerne mon axe X, pas mon axe Y, parce que nous voulons que ce soit en haut. La prochaine étape que nous voulons est de créer une simple boîte rectangulaire d'environ cette taille. Et assurons-nous également qu'il est aligné au centre. Ça va ? Si vous voulez y ajouter un trait ou une couleur, allez-y, mais je ne le ferai pas. À la dernière étape, nous voulons des boutons. Je vais donc dire que, disons Cliquez, cliquez ici, cliquez ici. Et nous voulons que ce texte contienne un peu, vous savez, 2020 semble beaucoup plus courte que cela. 24 fonctionnerait très bien. Donc 24 ans, c'est tout. Ajoutons une mise en page automatique à ce texte. Cliquez donc avec le bouton droit sur Ajouter une mise en page automatique Assurez-vous que ce bouton est suffisamment rembourré. Donc, en fonction de mon axe X, je vais le donner car, disons, je suis Wendy. Et l'axe Y, c'est-à-dire de haut en bas, I15. Alors allons-y et faisons-le. Ajoutons également de la couleur à ce bouton. Je pourrais ajouter quelque chose comme, disons, un bouton jaune. Un jaune plus vif. Très bien, ajoutons également un trait à cela. Je vais donc ajouter un trait et un trait noir. Oui, ça a l'air bien. Et assurez-vous simplement que cela est correctement aligné. Très bien, la prochaine étape, c'est mon seul cadre d'iPhone 14. Maintenant, je veux que chaque fois que l' utilisateur contourne cette boîte enchevêtrée en particulier, je souhaite que la couleur de cette boîte rectangulaire change. Maintenant, si vous apprenez le développement Web, vous devez le faire en CSS, nous avons les effets de survol, mais nous voulons réellement afficher ce genre de choses dans Figma. Alors, comment pouvons-nous le faire ? Donc, pour cela, je vais simplement sélectionner l'ensemble de mon cadre. Je vais faire une copie de ce cadre. Et je vais m'assurer que dans le cadre de copie, j'ai la couleur de la boîte rectangulaire que je veux réellement afficher, disons un rouge vif. Ainsi, lorsque je survole cette boîte rectangulaire, je veux que la couleur de ma boîte rectangulaire passe du gris au rouge, disons. Essayons donc de voir comment cela va se passer. Pour ça. Concentrez-vous sur le panneau des propriétés de conception. En haut, vous verrez trois options. Concevez, prototypez et inspectez. Il suffit donc de passer au prototype. Sélectionnez l'appareil que vous utilisez réellement. Sélectionnez l'objet sur lequel vous souhaitez que la modification soit affichée si une activité est cours sur cet élément particulier en cours sur cet élément particulier. Donc, vous pouvez voir ici que nous avons l'icône plus. Il suffit de faire glisser le pointeur autour du cadre où vous souhaitez effectuer la modification souhaitée. Comme vous pouvez le constater, nous avons le type d'action que cet objet doit effectuer. Donc, si je tape sur cette case rectangulaire, l'image suivante, qui représente le vote sur iPhone , s'affiche. Si je fais glisser cet objet, si je le fais glisser de gauche à droite ou de droite à gauche, c'est ainsi que ma modification sera affichée. Si je survolais cet objet, le changement sera affiché. Essayons donc de voir ce qui se passe si je tape simplement sur l'objet. Je vais donc le garder tel quel. Je veux que cela navigue vers mon iPhone, iPhone 14 pour encadrer. Si vous utilisez tous un projet de conception existant là-bas, vous avez peut-être également d'autres cadres. suffit donc d'aller dans le menu déroulant et vous assurer de sélectionner le bon cadre. Une fois que vous avez fait cela, vous pouvez voir l'onglet Animations, directement dans la fenêtre contextuelle des détails de l'interaction. Vous verrez l'animation. Donc, pour le moment, il est sélectionné pour se dissoudre. Au départ, il se peut qu'il soit sélectionné instantanément. Cela signifie que si vous cliquez simplement ou que vous pouvez simplement appuyer sur tel ou tel élément en particulier. Et B sera affiché instantanément. Ou il n'y aura aucun effet spécial. Si vous souhaitez afficher des effets spéciaux, vous devez sélectionner ce menu déroulant et choisir l'animation souhaitée. Donc, si je choisis dissoudre, voici à quoi ressemblerait notre animation. Si je sélectionne cette animation trop intelligente. Voici à quoi cela ressemblerait. Si je sélectionne « emménager », voici à quoi cela ressemblera. Essayons d'examiner chaque animation en passant la souris dessus , ou plutôt en tapant sur cette case rectangulaire. Donc, une fois que vous avez sélectionné votre animation, votre cadre, votre élément, tout ça. Cliquez simplement sur cette icône plus en haut. Vous pouvez donc simplement présenter. Figma s'ouvrira dans un nouvel onglet et vous verrez l'appareil que vous avez sélectionné. Donc, comme vous pouvez le voir, nous avons ce vote sur iPhone. Une fois que j'ai cliqué sur cette boîte rectangulaire, vous pouvez maintenant voir que je plane autour de cette boîte rectangulaire. Une fois que j'ai cliqué sur cette couleur rouge s'affiche, n'est-ce pas ? C'est ce qui se passe ici. Je peux simplement revenir à mes interactions. Je peux choisir, au lieu de toucher pour laisser supposer que je veux passer la souris, alors cette modification doit être affichée. Donc, si je l'actualise, et une fois que je passe la souris, ou plutôt si je dois le divulguer, je devrais le recharger à nouveau. Maintenant, si je passe la souris autour cette boîte rectangulaire, vous verrez la couleur rouge. Une fois que mon curseur sort de la boîte rectangulaire, il est dans son état d'origine. C'est ce que signifie réellement planer. Il s'agit d'un effet instantané. Permettez-moi de passer de l' instant à, disons, disons que je passe de l'instant à la dissolution. Maintenant, vous pouvez voir à quoi ressemblera l' animation. La couleur passe du gris à la lecture. Laisse-moi juste te montrer. Donc, une fois que je vais ici, vous pouvez voir que la guillotine, c'est lire. Si je déplace le curseur vers l'extérieur, la couleur redevient progressivement grise. C'est essentiellement ce qu'il fait. heure actuelle. Nous n'avons rien fait à notre bouton. Donc, une fois que j'ai cliqué dessus, vous pouvez voir un changement de couleur se produire sur la boîte rectangulaire, qui est de couleur bleu clair. Mais c'est essentiellement pour nous dire que vous n'avez fourni aucune action à cet élément. Si vous souhaitez ajouter une action à votre bouton, c' est-à-dire cliquer ici, vous pouvez simplement revenir en arrière pour sélectionner votre élément, le faire glisser ici. Ensuite, vous pouvez dire « on tap ». Ensuite, vous pouvez simplement choisir l'animation que vous souhaitez. Disons que je veux cette glissade. Alors tu peux le faire. Ça va ? Si vous le souhaitez, au lieu d' un délai de 300 millisecondes, vous pouvez modifier le délai à environ 100 millisecondes. Alors même toi, tu peux le faire. Maintenant, vous glissez dans quelle direction ? De droite à gauche, de gauche à droite, de haut en bas, de bas en haut, selon la méthode qui vous convient le mieux, vous pouvez la sélectionner et l'animation sera appliquée. Alors revenons en arrière. Et nous pouvons sélectionner de droite à gauche. Et essayons de le lancer. Maintenant, si je survolais ma boîte rectangulaire, vous pouvez voir les changements de couleur. Et si je clique sur ce bouton ? Vous pouvez voir que c'est ainsi que le changement apparaît réellement. C'est ainsi que vous pouvez contourner ces problèmes. Ça va ? Maintenant, si vous le souhaitez, si je clique sur ce bouton et qu'il devrait revenir à son état d'origine, vous pouvez également le faire. Modifiez simplement le texte au lieu de Cliquez ici pour indiquer que vous souhaitez également renommer les textes. Hum, disons, revenez en arrière. Donc, ce que vous pouvez faire, vous pouvez sélectionner, revenir en arrière. Et cela reviendrait simplement à sélectionner ce bouton. Faites glisser le pointeur vers l'image précédente. Et ou plutôt je devrais dire qu'il s'agirait d'une interaction. Il s'agirait d'une interaction. Et nous pouvons également ajouter une autre interaction. Maintenant, cette interaction va de ce bouton à mon état précédent. Donc, sur l'onglet, accédez à l'iPhone 141. Si tu veux que ça pousse. Tu peux même le faire. Maintenant, vous avez également la courbe. Cela signifie que nous voulons que l' animation soit facile à saisir, sortir et à entrer facilement. Maintenant, si vous avez leur propre CSS, vous devez être au courant de tout. Je n'ai pas besoin de me répéter. s'agit simplement d'une façon dont vous représentez réellement votre animation. Ça va ? Il existe donc également une autre façon de présenter votre animation. Et qu'est-ce que l'animation ? Fondamentalement, l'animation est essentiellement un moyen de représenter vos images. Qu'est-ce que la vidéo ? La vidéo est essentiellement constituée d'images, vous savez, de tonnes d'images affichées en une seconde sur votre écran, ce qui vous donne l'illusion qu'il s'agit en fait d'une vidéo. La vidéo n'est rien d'autre qu'un groupe d'images, un groupe d'images animées, comme un cadre où se trouve une personne juste ici. Dans la deuxième image, la personne est ici, puis ici. Lorsque ces trois images sont combinées et qu'elles vous sont montrées à une certaine vitesse, vous aurez l'illusion que la personne parcourt réellement la distance 1, la distance b. C'est donc ce que vous faites dans votre animation. En gros. Il s'agit simplement de contourner les images et vous essayez comprendre quelle devrait être la courbure de mon animation ? Voulez-vous que ce soit une animation linéaire ? L'assouplissement, c'est fini et tout ça. Vous pouvez donc simplement sélectionner ce qui vous convient le mieux. Je vais donc rester simple. Je vais sélectionner ce que j'ai sélectionné jusqu'à présent et je vais lancer mon prototype. Donc, si je reviens en arrière, vous pouvez voir que je peux revenir à mon image précédente. Si je survole, vous pouvez voir que je reçois le rouge, que j'obtiens cette couleur rouge et que j'obtiens également une zone de texte différente. Si je clique, vous pouvez voir c'est ainsi que l' animation apparaît. C'est ainsi que vous travaillez sur vos animations et que vous faites du prototypage dans Figma. 30. Wireframing à Figma: Très bien les gars, il est maintenant temps pour nous de comprendre ce qu'est le wireframing et la conception de l'interface utilisateur. Un wireframe est une ébauche numérique d'un dessin. Ainsi, en tant que concepteur d'interface utilisateur ou d'expérience utilisateur, vous devez créer des wireframes afin que vos clients ou votre entreprise, ou peut-être vos collègues, puissent visualiser rapidement vos idées. wireframe ne représente donc que la vue d'ensemble d'une idée, et il est très important que vous appreniez si vous souhaitez concevoir un site Web ou une application. Donc, dans l'ensemble, en général, wireframes ne comportent aucun élément de style. Lorsque vous essayez de créer une application ou un site Web, vous ne vous lancez pas directement dans le style de conception. L'ischémie vocale va utiliser quel type de topographie, quel type de famille de polices, et tout ça. Non, ce n'est pas la toute première chose que vous abordez. La première chose à faire est de créer un wireframe. Wireframe contient essentiellement tout le contenu, à part le contenu que vous allez couvrir sur cette page Web ou dans cette section particulière de votre application. C'est donc ce que signifie essentiellement votre wireframe . Pour donner un exemple. Pour l'ensemble de cette conférence, nous allons créer un wireframe de l'application Instagram. Ainsi, lorsque vous allez sur Instagram et que vous regardez le profil de l'un de vos amis, vous pouvez simplement sélectionner n'importe quelle photo et vous trouverez le nom d'utilisateur en haut. Vous trouverez l'emplacement. Si la personne a marqué le lieu, l'image elle-même, l'icône, l'icône du profil utilisateur. Ensuite, en dessous de l'image, vous verrez le nom d'utilisateur, le commentaire, puis leur légende, les icônes comme « commenter », envoyer », « enregistrer » et tout le reste. Donc, avant d' entrer directement dans le vif du sujet, nous avons déterminé quel type de famille de polices nous allions utiliser, quel type de palette de couleurs nous allions utiliser. Tout d'abord, nous essayons de visualiser la partie du contenu à l'endroit exact où nous voulons placer l'image. Que nous voulions qu'il soit centré, que nous voulions un rembourrage, que nous voulions une sorte d'alignement différent. Où dois-je afficher mon nom d'utilisateur ? En haut, en bas, là où il doit être affiché. Très bien, alors nous avons d'autres icônes et Instagram, comme les icônes de recherche de votre icône d'accueil . Ensuite, il y a, je ne sais pas, quelles sont les icônes que nous avons ? Nous avons notre propre icône de photo de profil qui nous mène à notre profil. Ensuite, il y a une fuite ou une icône de feedback, je suppose que c'est le cas. Ensuite, vous avez d'autres choses. Vous avez également les images du carrousel et Instagram, vous pouvez donc simplement les glisser et, en haut à gauche, en haut à droite, vous verrez cela sur le nombre d'images, sur quelle image en particulier vous vous trouvez. Supposons que la personne que vous êtes en train de mettre sur Instagram ait posté trois photos sur le parasol. Vous pouvez donc simplement glisser votre doigt et accéder au premier, au deuxième et au troisième. Et il s'affichera dans la section supérieure droite, et ainsi de suite. C'est donc ce que nous allons faire dans cette conférence. Créons donc rapidement un cadre de la taille d'un iPhone 14. Et la prochaine étape, ce que je vais faire, c'est zoomer dessus pour que vous puissiez tous voir que 75 % semblent bons. l'étape suivante, chaque fois que vous essayez de créer un design ou une structure filaire, il est important d' utiliser des grilles. Nous allons donc ajouter une grille de mise en page. Maintenant, nous allons passer du système de grille au système RO. Maintenant, pourquoi les lignes et ne pas les appeler ? Tout simplement parce que nous créons une application mobile. Maintenant, lorsqu'il s'agit d'applications mobiles, nous n'avons pas beaucoup de mouillage. Nous avons beaucoup de hauteur. Ainsi, lorsque nous avons affaire à beaucoup de hauteur, nous avons affaire à des rangées. Lorsque nous sommes très mouillés, nous avons affaire à de nombreuses colonnes. C'est donc à cela que nous allons faire face. Il suffit donc de sélectionner les lignes, bien sélectionner, le nombre de lignes. Et chaque mobile possède sa propre barre de notification, n'est-ce pas ? Où cela indiquerait l'heure, le pourcentage de batterie, service de l' opérateur utilisé sur le réseau, la puissance du réseau. Et au bas de la section mobile, écran mobile, vous pouvez voir les icônes du retour d'accueil et du gestionnaire de tâches. C'est pour cette raison que nous voulons une certaine marge. Laissons donc environ 50 pixels de marge. Et la taille de la gouttière me semble correcte. Je vais donc laisser cela à 20 pixels et je vais simplement le fermer et le garder tel quel. Maintenant, à l'étape suivante, nous allons utiliser ce point situé tout en bas de l' là où je passe mon curseur. Dans cette partie, nous voulons les icônes de navigation. Créons donc rapidement une boîte rectangulaire exactement de cette taille. Je vais donc simplement créer une boîte rectangulaire. Et je vais m'assurer que la largeur correspond également à la grille de mise en page. Et c'est la prochaine étape. Nous allons nous assurer de connaître la superficie de la maison à rechercher, la vraie ville de Saigon, je suppose qu'il y a une icône pointue, je crois. Et la dernière est votre propre photo de profil. Donc, je peux dire qu'il en faut cinq. Très bien, donc pour cela, ce que je vais faire, je vais simplement utiliser mon plugin Font Awesome. Donc, si vous n'avez aucune icône que vous recherchez dans le plugin Font Awesome, vous pouvez simplement utiliser l' outil Pen pour créer votre propre icône. Mais dans la plupart des cas, vous ne trouverez aucune icône qui ne soit pas disponible dans ce plugin particulier. Cherchons donc qui je peux, et je le rechercherai . Et ici, vous pouvez voir l'icône d'accueil. Alors apportons simplement cette icône ici. Où se trouve mon icône ? Où est-ce que je vais exactement ? Je peux le trouver. Où est mon Eigen ? Très bien, il a donc été remis ici. Nous allons déplacer ça. À l'étape suivante, nous voulons l'icône de recherche. Apportons simplement notre icône de recherche. Maintenant, je ne sais pas pourquoi il faut tant de temps pour apporter cette icône. Icône de recherche donc. Très bien, nous avons notre icône de recherche. La prochaine que nous voulons. Je ne pense pas que ce serait l'icône Reels et cette Font Awesome. Nous pouvons donc utiliser l'icône de la clôture à la place. Nous obtiendrions donc quelque chose de réel comme ça. Vous pouvez simplement taper film. Nous pouvons utiliser cette icône pour le moment. À la prochaine étape, nous voulons des articles de la boutique. C'est tellement pointu. Ça a l'air bien. Nous allons donc utiliser cette icône, cet article de la boutique ou celui-ci, celui-ci étant généralement utilisé sur Instagram. Nous allons donc simplement supprimer celui-ci. Et pour la photo de profil, vous utiliserez une forme de cercle pour que vous une forme de cercle pour que vous n'ayez pas à vous en soucier à l'étape suivante . Les autres icônes que nous utiliserons sont l'icône, l'icône, l'icône de commentaire et l'icône de parfum, ainsi que l'icône de sauvegarde. Apportons donc simplement toutes les icônes. Maintenant, j'ai ajouté toutes les icônes. La prochaine étape que nous allons faire est d'utiliser toutes ces icônes à des espaces égaux. Il suffit donc de faire glisser cette partie. Très bien, allons-y. Assurez-vous que la largeur et hauteur de celui-ci sont de 30 pixels sur 30 pixels. Et ça a l'air bien. Bien, essayons d'aligner ce centre par rapport à l'axe y, pas à l'axe X. Ou désolée, nous pouvons simplement le laisser ici. Très bien, à l'étape suivante, nous voulons l'icône de recherche. Il suffit donc de cliquer sur cette icône de recherche 30 par 30. Apportez simplement toutes ces icônes et nous essaierons de les placer à des distances appropriées. Donc 30 T. Ensuite, celui-ci, encore une fois, doit être 30, 30. Utilisons-le ici. Enfin, nous voulons une forme circulaire. Nous allons donc simplement l'utiliser. D'accord, 38, 38. Révoquez à ce sujet. Alors ne t'inquiète pas pour ça. Créons simplement à nouveau une ellipse de 30 x 30. Et nous allons donner une couleur de fond, peut-être une teinte plus foncée. Cette teinte a l'air bien. Et nous nous assurons que la distance de cette ellipse à partir de ce point est la même depuis cette position. Donc, pour ce faire, ce que je vais faire, dans ce cas, je vais maintenir ma touche Shift ou une autre touche enfoncée. Je peux simplement les sélectionner tous ensemble. Celui-ci, celui-ci, celui-ci, celui-ci et celui-ci. Et je peux les aligner de telle sorte qu'ils occupent des distances égales. Très bien, maintenant, je peux juste en sélectionner 12 en tout. Oups, je peux juste sélectionner 123, le tout. Et déplacez-le simplement pour qu' il soit aligné verticalement. Très bien, voici à quoi devrait ressembler notre navigation, la navigation la plus en bas. La prochaine étape, c'est ce que nous voulons. En haut, nous voulons l'icône, qui est l'icône de la flèche de retour. L'icône représentant une flèche de retour l' exigera également. Apportons donc simplement cette icône. On peut donc dire Back arrow. Oui, celui-ci, c'est ce que je cherchais. Mettons-le simplement ici. Et la prochaine étape que nous voulons est, encore une fois, ce serait 30 x 30. Assurez-vous donc que toutes les icônes sont de 30 par 30. Celui-là. C'est aussi 30 sur 30. Celui-ci est également de 30 par 30, 30 par 30, 30 par 30, 30 par 30. Très bien, cool. Bien que celui-ci ne soit pas très beau avec 30 x 30, nous allons contourner ce problème. Alors ne t'inquiète pas pour ça. l'étape suivante, nous voulons nous assurer que l'image correspond à la majeure partie de la pièce. Ça va ? Donc, euh, tu sais, il y a une légende, il y a une section de commentaires. Afficher tous les commentaires et la partie sous-titrée. Ensuite, nous avons l'image. Nous allons donc utiliser celui-ci pour savoir que cela doit disparaître. Cela permet à l'utilisateur de revenir en arrière. Très bien, alors dans cette ligne, en particulier, assurez-vous que nous avons l'icône, la photo de profil, le nom d'utilisateur. En dessous, nous avons l' emplacement et les trois points. Je crois que ce serait le cas. Ensuite, à partir de ce moment jusqu'à peut-être, disons ce point, ou peut-être ce point, nous garderons notre image. Donc, de ce point à ce point, de ceci à cela. Créons donc simplement une boîte rectangulaire. De ce point à peu près, à propos de cela. Non, ça a l'air bien. Celui-ci a l'air bien. Continuons donc comme ça pour que nous sachions que c'est de cela que nous parlons. C'est notre image. Très bien, à l'étape suivante, nous voulons que cette ligne envoie notre commentaire J'aime et ce bouton de sauvegarde. Très bien, nous allons donc simplement utiliser celui-ci. Assurez-vous qu'il est correctement aligné. Celui-ci est également correctement aligné. Icône en forme de cœur. Sélectionnez ce qui est dit ici. Très bien. Assurez-vous de sélectionner celui-ci. Juste ici. Sélectionnez celui-ci ici. Ça va ? Maintenant, celui-ci a l'air bien. C'est bon. Assurez-vous simplement qu' il est aligné au centre. Je peux donc simplement sélectionner celui-ci. Icône en forme de cœur. Et maintenant, mon icône en forme de cœur est également correctement alignée. Des trucs sympas. Maintenant, à l' étape suivante, nous voulons, nous voulons le nom de la personne, le nom de la légende, la légende, les commentaires et tout ça. Nous allons donc le faire. Et en haut de la page, terme V1, que voulons-nous ? Nous voulons ce terme. Permettez-moi de copier ceci. Faites-en une copie ici. Maintenant, je peux régler pour qu'il affiche que je parle de la personne. Hein ? Très bien. L'étape suivante, cela doit être correctement aligné au centre. Oui. Faisons le tour du texte, qui est inter, il a l'air bien. Nous dirons Nom d'utilisateur. Le nom d'utilisateur doit être semi-gras. Nous allons donc passer de la version normale à la version semi-audacieuse. Et en dessous de ce texte, nous voulons un autre texte, qui est l'emplacement. Donc, lorsque nous parlons de tag, taguez votre position. Et nous allons le copier, le changer en normal, n'est-ce pas ? Oui, ça a l'air bien. La prochaine étape que nous voulons est l' icône à trois points, l'icône Options. Hum, nous avons essayé de trouver le plugin, si c'est le cas, d'accord, nous n'avons pas d'options. On peut peut-être dire trois points. Nous avons trois points, c'est donc ce que nous allons utiliser. Faisons en sorte qu' il soit bien ajusté. Et en ce qui concerne les autres icônes également. Il est correctement aligné. Ouaip. Et assurez-vous simplement que c'est également 30 sur 30. 30 sur 30. Oh, oups. Cela doit être verrouillé. 30. 30. OK, ça n'a pas l'air bien. Essayons d'utiliser la taille d'origine. Celui-ci a l'air bien. 30 x 8,7, peu importe ce que c'est. Et il s'assure que c' est la distance qu'il couvre. Très bien, cool. Ce wireframe a l'air vraiment bien. La prochaine étape, si nous voulons que cela ait, vous savez, nous le ferons, nous garderons cela en noir. Et à l'intérieur de cette image en haut à droite. Dans cette partie, nous allons également créer une autre petite boîte rectangulaire, qui indiquera le nombre d' images sur lesquelles nous nous trouvons réellement. Assurez-vous donc que cette boîte a cette couleur. Cette couleur, non ? Hum, assurez-vous qu'il reste dans cette ligne. Ou plutôt, je devrais dire que nous allons simplement supprimer celui-ci, cela fera apparaître une zone de texte, et nous en verrons une par 31 par trois. Ajoutons à cela une mise en page automatique. Une fois que nous aurons ajouté la mise en page automatique, nous nous assurerons que le rembourrage dans toutes les directions est juste de 55 dans toutes ces directions. C'est quand même bien trop grand. Alors, faisons ces trois. Très bien, et nous allons lui donner une couleur de fond. Remplissez donc une couleur grise. Oui. Celui-ci a l'air bien. Si vous souhaitez ajouter un rayon de bordure, allez-y. Mais le wireframing nécessite nécessairement n'importe quel rayon de bordure. Nous allons donc le garder tel quel. Par ici. Nous pouvons à nouveau ajouter trois points juste pour nous assurer qu' il s'agit d'un parasol. Nous pouvons donc simplement en faire une copie. Et on peut changer la couleur. Je peux juste le placer au centre. Assurez-vous simplement qu' au lieu du noir, nous avons la couleur bleue. Juste pour montrer qu' ils utilisent du cortisol. Donc couleur bleue. Et ça a l'air bien. En fin de compte, nous voulons. Ici, on peut dire Instagram. Vous pouvez utiliser Instagram sur font-style. Et ici, qu' allons-nous faire ? Nous allons dire, tout d'abord, que nous allons avoir ceci, d'accord. Laisse-moi juste aligner le centre, quelque chose comme ça. Ensuite, nous utiliserons la zone de texte. Très bien, la zone de texte, aimée par cette partie, verra que cette personne l' aime. Et apportons ça quelque part ici. Cette partie. Nous pouvons utiliser le même texte. Alors copiez-le et placez-le ici. Très bien. Tu vois, j'ai aimé par nom d'utilisateur et disons 20 autres, non ? Wendy, d'autres. Cool. C'est ce que nous voulions. À l'étape suivante, nous voulons la légende. Encore une fois, utilisons simplement ce nom d'utilisateur, en style de police, n'est-ce pas ? Nous pouvons simplement placer le nom d'utilisateur ici. Encore une fois, copie du texte. Maintenant, pour la légende, nous pouvons utiliser le texte du Lorem Ipsum. Je peux donc utiliser trait d'union des légendes et utiliser le Lorem Ipsum. Je vais donc simplement utiliser le plugin Lorem Ipsum. Alors générons simplement des phrases phi. Et il n'a pas évalué cinq phrases. Assurez-vous simplement qu'il correspond à la fonction de masquage automatique de ces éléments. Je devrais plutôt le dire. Je suis juste en train de dézoomer. Et je vais en modifier la taille. Je vais modifier la taille de ma zone de texte. Les sites de cette zone de texte doivent être raccourcis. Et assurez-vous simplement qu'il occupe la hauteur automatique. Encore une fois, zoomez dessus. Certains de ces éléments devront peut-être être supprimés dans la partie légende. Vous pouvez simplement redimensionner cette partie. Vous pouvez placer la légende ici. Supprimons cette partie de la légende, cette partie. Et on peut dire en savoir plus. En savoir plus Et nous pouvons également ajouter des points de suspension pour assurer que c'est bien ce que nous voulons dire. Nous pouvons simplement sélectionner Lire la suite de la partie. Nous pouvons changer la couleur de remplissage en gris, quelque chose comme ça. Très bien. En savoir plus et en bas, nous utiliserons la section des commentaires. Ça va ? Nous pouvons donc dire Afficher tous les commentaires phi. Enfin, nous voulons également spécifier la date. Très bien, donc pour cela, ce que je vais faire, c'est simplement diminuer la taille de ces icônes. Je trouve que 30 x 30, c'est bien trop grand. Réduisons donc jusqu'en 2020. Non, ce serait bien trop petit. 25, cependant, ce 25 semble bon. Assurez-vous donc que celui-ci s'adapte correctement. Très bien, sélectionnons des éléments entiers. Déplace-le quelque part ici. Et au final, nous voulons la date. Nous pouvons donc voir ici que nous pouvons sélectionner la date. Disons qu'il y a deux jours. Donc, il y a deux jours, quelque chose comme ça. Et voici à quoi ressemblerait votre wireframe Instagram . C'est pas cool, ça ? Au final, vous pouvez simplement sélectionner votre cadre. Vous pouvez simplement supprimer la grille. Et voici à quoi ressemble réellement votre wireframe Instagram. Et avant de terminer cette conférence, je voudrais juste ajouter quelques autres éléments qui, selon moi, pourraient apporter des modifications. Cela reviendrait à ajouter des lignes horizontales. Il suffit donc de sélectionner tous ces éléments. S'il te plaît, assieds-toi quelque part ici. Très bien. Maintenant, ajoutons une ligne, juste une ligne simple, qui divise cette section. Ça va ? Une simple ligne horizontale. Assurez-vous simplement que la couleur du trait est grise. Cette couleur. Très bien, je vous en prie, asseyez-vous quelque part ici. Très bien, faisons-en une copie. Et où allons-nous le coller ? Juste ici. Très bien. Quelque part ici. Et une autre, qui serait heureuse d'entendre ce désert. C'est ainsi que votre Instagram. Laisse-moi juste dézoomer pour que tu puisses voir correctement. Et voici à quoi ressemblerait réellement votre wireframe Instagram . 31. (30) Exporter des fichiers dans Figma: Très bien les gars, maintenant que nous avons appris à créer des wireframes pour notre conception, voyons également comment nous pouvons les exporter dans différents formats et quel format utiliser en particulier pour notre cas d'utilisation. Je vais donc simplement sélectionner mon cadre chaque fois que vous souhaitez exporter l'un de vos designs, assurez-vous simplement de sélectionner ce cadre entier. Il suffit donc de sélectionner cela. Et dans leur panneau des propriétés de conception, il suffit de faire défiler la page vers le bas trouver l'exportation. Dans un premier temps. Ce serait comme ça. Cliquez donc simplement sur l'icône plus et vous trouverez la méthode d'exportation. Il existe maintenant différents formats dans lesquels vous pouvez exporter votre fichier de conception Figma. Maintenant, c'est PNG, JPEG, SVG et PDF. Maintenant, que signifie réellement P&G ? Pourquoi dois-je exporter mon design au format PNG ? PNG est donc l'abréviation de Portable Network Graphics. Il s'agit d'un format d'image bitmap généralement utilisé pour transférer des images via Internet. N'entrez donc pas dans les détails sur ce qu'est le PNG, qu'est-ce que ce format bitmap ? Sachez simplement qu'il s'agit d'un format de fichier sans perte, ce qui signifie que la qualité de l'image n' est pas réduite chaque fois que l'image est compressée. Très bien, donc si j'essayais d' envoyer un fichier PNG par e-mail, disons, et vous savez tous qu'il y a une limite de taille. Il y a une certaine limite de taille pour les fichiers, Il y a une certaine limite de taille pour seuls 25 méga, 25 Mo de fichiers peuvent être envoyés via votre Gmail ou l'un des fournisseurs de services de messagerie que vous utilisez. Dans ce cas, P&G entre en jeu car vous pouvez réduire la taille du fichier sans que la qualité ne soit réduite. P&G en fait donc bon usage lorsque vous souhaitez partager vos fichiers sur Internet. Vient ensuite le format JPEG. Jpeg est l'abréviation de Joint Photographic Group. Désormais, lorsque vous compressez cette image d'un groupe photographique conjoint, cela entraîne une réduction de la taille du fichier, mais également une réduction de sa qualité d'image. Ce n'est donc pas un moyen idéal de partager vos fichiers JPEG via Internet. En général, si vous avez un fichier, un fichier JPEG, disons qu'il fait environ un mégaoctet dans votre système. Et vous essayez de l'envoyer à l'aide d' logiciel de messagerie instantanée ou d' une application de messagerie instantanée que vous utilisez. Quelque chose comme, disons, WhatsApp. Donc, si vous envoyez un fichier, il est possible que WhatsApp réduise ou compresse généralement la taille du fichier afin de faciliter la transmission de données. Dans ce cas, si vous envoyez des fichiers JPEG, les fichiers seront compressés et le récepteur recevra une image de mauvaise qualité, et vous ne voulez pas que cela se produise. fichiers JPEG sont donc généralement utilisés lorsque vous souhaitez imprimer intégralité de votre dessin ou chaque fois que vous l'utilisez à des fins photographiques. Utilisez donc le format PNG lorsque vous souhaitez envoyer les fichiers sur Internet, le format JPEG lorsque vous souhaitez réellement imprimer du contenu. Puis vient le format SVG. Maintenant, le SVG est en fait votre graphique vectoriel évolutif. Désormais, les graphismes ne sont plus liés à une résolution spécifique. cette image Par exemple, cette image peut avoir une largeur de 1920 x 20 pixels, mais les SVG ne sont liés à aucune résolution spécifique. Il s'agit d'un graphique vectoriel basé sur XML, ce qui signifie que vous pouvez agrandir ou réduire n'importe quel élément sans perdre sa clarté. Maintenant, quand devriez-vous réellement utiliser le SVG ? Supposons que vous essayiez de créer une nouvelle icône à l'aide de Figma. Dans ce cas, le SVG devient très utile. Donc, lorsque vous transmettez ce format SVG à un développeur frontal, alors lorsque le développeur frontal code réellement ce contenu, disons en HTML ou en React. Ensuite, lorsque le développeur souhaite utiliser votre icône, format SVG devient un excellent cas d'utilisation, car SVG est très léger et n'a pas de résolution spécifique. Et au final, nous avons le format PDF. Le PDF est très populaire car il ne nécessite aucun matériel ou logiciel spécifique, il fonctionne sur n'importe quel système. Pdf est essentiellement l'abréviation de Pitcher Documented Format. Nous utilisons donc généralement des fichiers PDF pour partager nos actifs, que nous avons enregistrés dans Figma. Et je suis ici. Vous constaterez peut-être également que nous avons différentes options d'échelle lorsque x 1x2x, vous vous demandez peut-être ce que cela signifie ? Donc, en général, il a été défini sur un x par défaut. Si je sélectionne x, la qualité sera doublée. Si j'en sélectionne deux pour x, la qualité sera la plus élevée, mais la taille du fichier sera également importante. Donc, si j'essayais de le télécharger, laissez-moi exporter ce cadre pour iPhone 14 au format x puis au format PNG. Ensuite, je vais simplement l'afficher dans le dossier. Et laissez-moi simplement vous le montrer. Combien de fichiers occupe-t-il ? Taille du fichier. Donc, environ 100,103 ko d' espace sont occupés. Je vais vous montrer à quoi ressemble l'image. Voici donc à quoi ressemble réellement l'image et c'est une manière inappropriée d'envoyer un fichier qui nous intéresse. C'est donc ainsi que vous travaillez réellement. Vous exportez des systèmes quand vous le souhaitez , vous envoyez vos fichiers à vos clients et peut-être à vos collègues, etc. Dans ce cas, vous utilisez ces différents formats de fichiers.