Figma pour l'interface utilisateur et l'expérience utilisateur UIUX

1. Introduction à Figma: Bonjour à tous et bienvenue dans notre cours de Figma for Learning UI UX Si vous envisagez d'apprendre l'interface utilisateur et l' expérience utilisateur dès le début, vous êtes au bon endroit. Parce que nous aborderons dans ce cours du niveau de base au niveau avancé l'utilisation de cette application particulière. Il s'agit d'un cours de niveau débutant. Si vous n'avez aucune expérience préalable, vous pouvez simplement participer à ce cours et nous pourrons apprendre ensemble. Voyons d'abord tout ce que vous allez apprendre de ce cours. abord, je vais vous donner l' introduction, en expliquant ce que fait cette application Figma, et en quoi elle est meilleure que toute autre application de conception d'interface utilisateur et d'expérience Après cela, je vais vous parler de l'espace de travail et de l'interface, d'accord ? Dans n'importe quelle application ou dans n'importe quel logiciel, si vous connaissez l' espace de travail au niveau de l'interface, il nous sera assez facile de travailler dans le même espace. Ensuite, je vais vous parler tous les outils de base de Figma, ce que vous pouvez utiliser OK, je vais vous expliquer comment déplacer votre objet ou comment créer un cadre, sélectionner un cadre en particulier et l'agrandir en fonction de vos besoins. Et nous vous montrons également comment importer des images, des vidéos et différents types de formes. OK, après ça, je vais vous expliquer comment vous pouvez utiliser les pages. Parfois, nous devons créer plus de deux pages. Dans ce cas, façon dont vous allez gérer les pages et toutes les fonctionnalités liées aux pages. Je vous le dirai ensuite , vous apprendrez le prototypage avec Figma, ce qui vous aidera à créer votre propre application de conception mobile ou votre page Web D'accord, vous pouvez donc concevoir votre propre page Web ou votre application mobile afin de connecter tout cela ensemble et d'obtenir un bon résultat. Ensuite, je vous parlerai quelques-unes des options d'assouplissement que vous pouvez utiliser. Et certaines animations du prototype, comme la façon dont vous pouvez faire de l'animation lors du prototypage Je vous parlerai ensuite, je vous expliquerai comment vous pouvez importer des images et les utiliser dans la conception de votre interface utilisateur, d'accord ? Vous pouvez les recadrer et bien d'autres encore. OK, donc le prochain cours portera sur ce sujet. Juste à propos du masquage, de la façon dont vous pouvez recadrer des images de toutes les extrémités et différentes manières de le faire, d'accord ? Je vais également vous parler des différents plugins d'image, de ceux qui peuvent tous être utilisés. OK. Après cela, il existe une option appelée composant et effets. Je vais vous expliquer comment utiliser le composant et comment vous pouvez mettre différents types d' effets dans votre fichier Figma Enfin, je vais vous expliquer comment exporter vos images, que vous avez importées dans votre fichier. Je vais donc vous expliquer comment exporter vos images depuis l'application Figma D'accord, après avoir terminé ce cours, vous serez en mesure de créer votre propre application mobile et votre propre page Web. Et vous aurez également votre propre couleur, palette et dégradés Vous serez en mesure d'acquérir une bonne connaissance de la coloration dans le domaine de la conception Web et de réaliser bon prototypage, ce qui vous permettra d' atteindre un niveau avancé d' utilisation de cette application Après cela, vous pourrez également sélectionner des images pour créer des boutons et créer la police de la page Web. En gros, vous serez capable de concevoir une page Web en bref, car ce projet est comme une classe basée sur un projet. Pendant l'apprentissage, vous aurez des projets de classe. Donc, ce que tu auras appris, tu pourras participer au cours. Vous pouvez vous entraîner pendant que vous apprenez. Vous aurez accès à des ressources de soutien dans ce cours. Il vous sera plus facile d'apprendre pendant l'apprentissage. Si vous rencontrez un problème ou si vous avez des questions, hésitez pas à me les poser. Je suis toujours là pour t'aider. Commençons ensemble à apprendre Figma pour IU. 2. Qu'est-ce que Figma: Bonjour à tous, et bienvenue dans le tutoriel sur Figma Ici, nous allons apprendre ce qu'est Figma. Et le premier chapitre sera une introduction à Figma, où je vais vous expliquer en quoi consiste essentiellement cette application, comment nous pouvons utiliser ce logiciel et bien d' autres choses encore ici OK, donc si vous êtes débutant et essayez d'apprendre le design UI UX pour la première fois, c'est le meilleur cours pour vous où vous pouvez apprendre cela. Après cela, je vous expliquerai comment fonctionne réellement cette Figma Fima a donc révolutionné le processus de conception. Nous proposons une plateforme collaborative basée sur le cloud dotée fonctionnalités puissantes qui s'adressent à la fois aux novices et aux experts Que vous soyez un designer UI UX en herbe, un chef de produit ou un passionné de création, ce tutoriel vous permettra d'acquérir les compétences nécessaires pour naviguer dans le monde de Figma et produire des Ne perdons pas de temps et commençons par ce cours et le premier chapitre sur Figma ici Comme vous pouvez le voir, j'ai recherché Figma en micro, cette application ici C'est le premier, et c'est sur ce dossier que nous allons travailler. Ce fichier fonctionne réellement dans les deux cas. Si vous utilisez un produit Apple ou même Windows, vous pouvez également y utiliser ce fichier. Sur notre smartphone également, nous pouvons utiliser cette application particulière pour moi. Je vais d'abord passer à celui-ci. OK, une fois que vous arrivez ici, vous pouvez voir l'interface ici. OK, ici nous avons deux types de choses, une figma et une autre avec de la confiture de figma Ici, tout ce que vous pouvez faire ici, vous pouvez le faire en ligne, vous pouvez obtenir des tests de planification stratégique. Vous pouvez également créer différents types de diagrammes. Ici. Vous pouvez également effectuer des travaux de développement, de conception et de prototypage. OK, ici, si je veux télécharger cette application en particulier, je peux la télécharger d'ici. Mais d'abord, voyons ce que nous pouvons obtenir ici. À partir de là, je peux voir les aperçus, je peux également voir les avis des clients, ainsi que différents types de ressources concernant cet outil de conception UI UX particulier OK, c'est similaire avec un XD. J'utilise cette application de feedback depuis un certain temps. Ce que je peux différencier, c'est cet outil est assez convivial. Avec cette application ou avec cet outil, nous pouvons généralement travailler un peu mieux à mesure qu' elle reçoit de nouvelles mises à jour. Ils ont de très bonnes mises à jour à partir d'ici. OK, ici, je peux voir différents types de modèles, plug-ins et de bibliothèque de ressources pour toutes les pratiques. Si j'ai besoin d'aide pour quoi que ce soit, je peux aller au centre de santé et demander de l'aide. Comme je veux, je peux exposer mon problème. Et voici les ressources communautaires. D'accord, ici aussi, j'ai de nombreux créateurs communautaires d'où je peux recommander leur travail et apprendre différents types de choses. Comme dans cette conception d'UU, nous devons essentiellement comprendre comment nous voulons concevoir notre Si nous référons ces personnes et voyons leur travail, nous aurons en gros une meilleure idée de la conception d'UU Et ici, nous avons différents groupes d'utilisateurs ainsi quelques programmes éducatifs sur la façon de s'habituer à cette application particulière. Je peux également voir différents types d'événements et diffusions en direct organisés par Figma Comme je suis déjà connecté, il existe une option appelée Déconnexion. Si je veux me déconnecter, je peux me déconnecter d'ici. OK, si je vais ici, ils auront une idée de ce que c'est. Tant de personnes peuvent travailler ensemble dans cette application ou dans un même dossier. Nous pouvons toujours travailler sur la dernière version. Et nous pouvons également enregistrer notre travail dans les bibliothèques d'équipe Cloud, ce que je vous expliquerai plus tard et en détail. OK, j'ai tout ça ici. Vous pouvez voir quelles marques sont ses partenaires. OK, voici la page complète. Et laissez-moi télécharger Figma d'ici. OK, je vais donc cliquer sur télécharger. Et une fois que j'ai cliqué sur Télécharger, cette Figma a essentiellement deux versions, d'accord. Il existe une version gratuite ainsi qu'une version payante. Si vous commencez par la conception graphique ou si vous commencez par l'interface utilisateur pour la première fois, je vous suggère de commencer par la version gratuite et ensuite , lentement, vous pouvez passer à la version payante. Parce que c'est une version payante. Ils ont quelques fonctionnalités premium qui sont très utiles lorsque vous travaillez régulièrement sur cette application. Mais si vous utilisez un temps ou pour un projet en particulier, un ou deux projets, et après cela, vous n'allez pas l'utiliser pour vous entraîner. Et toutes les versions gratuites sont également bonnes car elles possèdent également de nombreuses fonctionnalités différentes. Comme vous pouvez le voir ici, si je souhaite le télécharger sur un ordinateur de bureau, j'ai l'option pour un système d'exploitation et aussi pour Windows. Si je veux le télécharger sur mon iphone ou mon ipad, je peux cliquer ici, et voici l'option ipad ici. J'ai pour Android, si je veux utiliser différents types de téléphones, en gros, l' installateur de téléphones, c'est comme si cela me donnait différents types de téléphones que je pourrais utiliser dans Figma Nous pouvons donc également télécharger celui-ci pour OS et pour Windows, c'est celui-ci. Ce que je vais faire, c'est que j' ai un ordinateur portable Windows, que j'utilise actuellement. Je vais juste cliquer ici, Dest pour Windows. Une fois que j'ai cliqué ici, vous pouvez voir qu'il est téléchargé en haut ici. Cela peut prendre un certain temps , soit environ 100 Go, et le téléchargement me prendra environ une minute. Donc, ici, vous pouvez voir à ce sujet, exemple si je veux voir toutes ces ressources, si je veux comparer avec d'autres applications. D'accord, voici donc des applications compétitives qui sont Sketch, comme je vous l'ai déjà dit, Obex D et Framer Design Studio Miro Invasion. Voici donc certaines des applications qui font la même chose, qui ne sont que des applications d'interface utilisateur, de concepteur d'expérience utilisateur. Je peux donc les utiliser à partir d'ici ou les comparer et voir quelle est la différence entre ces applications et cette figure si vous voulez comparer OK, si je veux explorer cela, ce que je peux faire, je peux le voir d'ici. Et si je veux utiliser la version payante, voyons quel en est le prix. OK, ici. Si je viens ici, vous pourrez voir si j'utilise la version gratuite. Je recevrai trois fichiers Figma et trois fichiers Fija, lesquels je pourrai collaborer avec d'autres personnes au travail Et j'aurai un nombre illimité de fichiers personnels, collaborateurs, de plugins, modèles, et je pourrai également télécharger l'application mobile. Cela commence à partir de 12$ par mois si j'utilise le logiciel professionnel D'accord, vous aurez ici un nombre illimité de fichiers Figma, un historique des versions illimité, bibliothèque d' équipe, un prototypage avancé et le mode Ve, qui est en Je peux le télécharger ici dans celui-ci si je choisis le modèle professionnel. Je peux également obtenir une réduction si je peux prouver que je suis étudiant ou enseignant. Peut-être que si vous êtes étudiant, vous pouvez simplement télécharger votre carte d'identité ou tout autre document de votre collège, université ou école par la suite Si je viens ici, 45$ par mois, c'est l'organisation Figma OK ? Vous trouverez donc ici ces bibliothèques, gestion centralisée des fichiers, l'authentification unique, et tout ça, d'accord ? Et voici la version premium , à savoir 75$ par éditeur. Chaque mois, vous recevrez un texte dédié, des systèmes de conception avancés, un accès invité, restrictions d'accès au réseau et des liens publics expirant Vous trouverez tout cela ici, il s'agit de Figma en tant que point de départ Tu pourras obtenir la même chose. lecteur de musique, si j' utilise le lecteur gratuit pour Figma Professional, coûte 3 dollars chez Fija Organization, cinq dollars, et l' entreprise coûte 5 dollars par éditeur, par mois, selon vos besoins Vous pouvez voir lequel sera bon pour vous, bénéfique pour vous. J'ai téléchargé celui-ci, maintenant je vais accéder à mon dossier, je vais essayer d'installer cette application particulière sur mon PC. Une fois que j'ai installé cette application en particulier, elle m'a directement redirigé vers cette application. OK, alors je vais rentrer chez moi, et comme vous pouvez le voir ici, j'ai tout ce travail, d'accord ? Je vais vous montrer tout ça, ce que j'ai fait ici. Vous pouvez voir que j' ai fait tout cela. Je vais vous montrer comment vous y prendre à partir d'ici. Comme vous pouvez le constater, il s'agit de la cloche de notification. Je peux cliquer ici pour voir si j'ai une notification ici. Il s'agit du fichier le plus récent. Sur lequel vous avez travaillé. Il sera enregistré ici. L'équipe est très importante dans cette Figma. OK ? Donc, en gros, supposons que je fasse une leçon ou un projet en particulier, d'accord ? Dans ce cas, je peux prendre différentes personnes ou je peux inclure un grand nombre d'entre elles, et nous pouvons travailler sur un seul dossier, autant d'entre nous en tout cas, d'accord ? C'est donc l'une des meilleures choses qui m'est très utile si j'obtiens quelque chose comme cela me prendra environ 20 à 30 heures et je veux terminer ce travail en trois jours, quatre jours. Je peux peut-être emmener deux ou trois personnes avec moi et ensemble, nous pourrons y travailler, partager nos idées, nous habituer à cette application en particulier et terminer notre travail. Vous pouvez donc voir ici si j' ai une équipe ou non. Et voici le brouillon dans lequel tout mon travail est enregistré. OK. Et voici l'appli la plus récente. Ici, vous pouvez obtenir, vous êtes vérifié pour l'éducation de la Fema Et ici, vous pouvez voir une équipe prête à améliorer gratuitement. OK. Donc, comme j'ai postulé pour Fema Education One Je peux donc maintenant être ici, car j'ai déjà créé ces équipes Comme vous pouvez le voir, j'ai différentes équipes ici. Une fois que je l'ai indiqué, vous pouvez voir que j'ai déjà réalisé certains projets d'équipe. Permettez-moi donc de le supprimer d'ici. Permettez-moi de supprimer, j'écrirai BC. Voici comment supprimer une équipe. OK ? Et de la même manière, je supprimerai également celui-ci. Je l'ai appelé Robert. Je vais à nouveau supprimer l' équipe ici. Je vais également supprimer celui-ci juste pour vous montrer comment nous pouvons réellement créer une équipe. C'est le processus par lequel nous pouvons réellement supprimer une équipe. Laissez-moi supprimer. Oui, cette équipe est également supprimée. Maintenant, à partir de là, je peux créer une équipe libre. D'ici. Une fois que je veux d'abord créer une équipe, je dois venir ici, cliquer sur Créer une équipe, et je vais juste lui donner un nom. Supposons que je l'appelle Mark. OK, et je vais cliquer sur Créer une équipe. Ici, vous pouvez voir une autre page qui est apparue ici. Ici, vous pouvez ajouter vos collaborateurs et ce que je peux mettre leur e-mail ici dans ces cases. Comme je vous l'ai dit, dans cette version, je ne peux en ajouter que trois dans mon équipe Si j'utilise l'autre version, qui est payante , je peux en ajouter d'autres. Je ne mettrai aucun e-mail ici pour ça. Je vais juste garder cette partie pour le moment. Ici, vous pouvez voir que j'ai terminé la configuration de cette option et je vais simplement cliquer dessus. J'accepte le service Figs Term Oil et je cliquerai sur l'option de mise à niveau complète. Ici, vous pouvez voir que l'équipe est en cours de création. Celui-ci est le projet d'équipe que j'ai ici. Je peux en fait le voir comme ça dans un format minimum ou également dans un format de grille. Je vais annuler celui-ci. Maintenant, vous pouvez voir sur ma page d'accueil que j' ai une équipe en particulier. Voici une autre option. Si je souhaite créer un nouveau projet, je peux ajouter un nouveau projet ou je peux également le consoler. OK, je peux juste le consoler comme ça. OK, donc si je viens ici et maintenant, je vais vous montrer à quoi ressemblera l'espace de travail si je clique sur celui-ci ici. Vous pouvez voir que c'est l' espace principal où vous travaillerez dans Figma d' ici au-dessus de vous Si je double-clique sur celui-ci à partir d'ici, vous pouvez réellement modifier ou renommer ce fichier de projet en particulier OK, permettez-moi de nommer celui-ci comme projet 1. Et je vais cliquer sur Enter depuis mon clavier ici, vous pouvez voir que celui-ci est enregistré ou renommé Project One. Ici, vous pouvez voir que j'ai le menu principal. À partir de là, j'ai l' option de fichier et tant de choses que je vous expliquerai plus tard dans le cours. C'est l'outil de sélection, c'est le cadre, c'est l'outil de forme, c'est l'outil de création qui inclut le péché et l'outil crayon. Ici, j'ai l'outil de texte et ici les ressources, l'outil manuel. Si je souhaite ajouter un commentaire, je peux en ajouter un en utilisant cette case. Je vous raconterai tout cela dans les dernières étapes du cours. Tout ici, chaque outil et ses utilisations. Je vais vous dire que c'est le panneau de commande à partir duquel je peux choisir le design et exporter mes médias. Après avoir travaillé, j' ai quelques prototypes dont je vais vous montrer comment procéder. Je vous expliquerai également comment faire du prototypage par la suite Vous pouvez également voir que j'ai des styles locaux, car j'ai déjà expliqué comment nous pouvons exporter. Nous avons différents formats, PG, JPG, SVG et PDF Je peux le voir aussi. Ici, j'ai l'option de prévisualisation. C'est l'essentiel, ce que nous allons examiner , à savoir la couche. D'accord, donc lorsque nous travaillons dans Figma, nous devons utiliser une couche et la pose est l'essentiel Je vais donc vous parler de la pose, de façon dont nous pouvons ajouter différentes pages à partir d'ici. Prenez deux ou trois pages et déterminez comment créer un cadre. Nous allons donc apprendre tout cela dans le prochain tutoriel. J'espère que vous avez compris comment nous pouvons réellement télécharger et installer l'application Figma Et si vous ne souhaitez pas le télécharger également, vous pouvez également travailler depuis le navigateur. Ici, comme je vous ai montré comment nous pouvons ajouter, il s'agit de l'option Actifs. Je vais donc également vous montrer son utilisation. J'espère vous retrouver tous dans le prochain tutoriel sur Figma. Prends soin de toi. Et au revoir à tous. 3. Espace de travail et interface: Bonjour à tous, et bienvenue à tous dans un autre tutoriel sur Figma Lors du dernier cours, nous avons appris ce qu'est Figma. Et je vous ai également montré l'espace de travail à partir duquel vous pouvez travailler. Dans le dernier cours, je vous ai expliqué brièvement ce que c'est, mais dans ce cours, je vais vous montrer en détail l'espace de travail au niveau de l'interface que vous pourrez comprendre une fois le travail terminé, quoi il ressemblera réellement ou comment cela fonctionne réellement. Une fois que vous aurez compris l' espace de travail au niveau de l'interface, il vous sera facile de travailler dans cette application particulière. Ne perdons pas de temps ici, et commençons par ce cours en particulier ici. Comme vous pouvez le voir la page d'accueil de mon application Figma, je vous ai expliqué tout cela Ce que je vais faire, c'est prendre un projet Figma complet pour vous montrer à quoi il ressemble réellement et ce que l'on peut y faire Pour cela, je vais simplement m' adresser à la communauté, la communauté Figma, car je vous ai expliqué tout ce que vous pouvez faire Permettez-moi de vous montrer à quoi cela ressemble réellement ici dans la communauté Figma Vous aurez tellement de choses ici, comme Aspiration Team Sings Design Systems. Si vous souhaitez voir le développement d'une page Web ou d'une page mobile, vous pouvez le voir d'ici. Ils nous ont également montré le cadrage. De là, vous pouvez télécharger différentes icônes gratuites à partir d'ici. OK, pour l'utiliser dans ton travail. Il y a tellement de choses à apprendre de cette communauté de Figma Tous les apprenants avancés ou avancés, ceux qui travaillent avec la Figma, téléchargent parfois leur travail ici pour montrer en quoi cette application est utile Permettez-moi de descendre et de voir comme j'ai différents fichiers ici, je vais juste passer à celui-ci et voyons ce que je fais, les avoir ici. À partir de là, ce que je vais faire, je vais venir ici, essayer de voir quels sont tous les composants dont je dispose. OK, permettez-moi prendre une simple application pour vous montrer ici. OK. Je vais ouvrir celui-ci dans mon application. Comme vous pouvez le voir, c'est chargé ici. Il s'agit essentiellement d'une application mobile de prise de rendez-vous avec le Dr. OK. Nous verrons quelles sont toutes les options qui s'offrent à moi ici. OK, je vais juste ouvrir celui-ci dans Figma. Je vais utiliser l'un de mes comptes ici. Si je veux modifier le fichier, je peux le modifier, mais je ne le ferais pas juste pour vous montrer à quoi il ressemble réellement lorsque celui-ci est assez volumineux. OK, avec mon outil à main, je vais déplacer celui-ci. Permettez-moi de commencer par ici et je vais simplement zoomer ici. OK, donc j'espère que vous pouvez voir maintenant comment il a réussi à le faire étape par étape. Comme vous pouvez le voir ici, il s'agit du premier écran, et une fois que vous aurez cliqué ici, vous serez redirigé vers cette page ici. Il se peut que cette option comporte autre chose. Vous avez les étapes à suivre, si vous cliquez sur Commençons et bien d'autres. OK, comme je vous ai expliqué les bases de tout cela, une fois que vous aurez terminé le travail ou une fois que vous l'aurez fait, voici vous ai expliqué les bases de tout cela, une fois que vous aurez terminé le travail ou une fois que vous l'aurez fait, quoi cela ressemblera réellement. Comme vous pouvez déjà le voir ici. Voilà à quoi ça ressemblera, d'accord, à partir d'ici. Si je veux prendre quelque chose, supposons que je veuille prendre cette page en particulier ici et que je veuille déménager. Vous pouvez voir ici celui-ci sera automatiquement sélectionné car il se trouve sous ce cadre en particulier. Et si j'ai sélectionné un autre cadre, si je fais un zoom arrière, je pourrai voir lequel j'ai sélectionné. C'est ainsi que cela fonctionne réellement. Ce serait mieux si je vous montrais un projet dans lequel je pourrais intégrer toutes ces choses en une seule sur mon écran. Parce que ce projet est assez vaste comme vous pouvez le constater. Mais c'est un très bon projet réalisé ici et c'est un projet global. Ce que je vais faire, c'est soit je peux juste le déplacer d'ici, d'accord ? Pour vous montrer, les gars. Sinon, je peux juste garder ça ici. Comme vous pouvez le voir, vous pouvez modifier le positionnement et cela vous montrera également les alignements, d'accord ? C'est comme ça que tu peux te déplacer. Tout dépend de toi, d'accord ? Comme la façon dont il vous convient. Vous pouvez en fait l' aligner côte à côte, verticalement ou horizontalement. Cela dépend totalement du Royaume-Uni. Ce sont les couches. Comme vous pouvez le voir, on les appelle des cadres, que je peux créer en utilisant ce bouton ici et les touches de raccourci. Je vais vous parler de tout cela, de la façon dont nous pouvons créer un cadre, manière dont nous pouvons y consacrer votre travail, manière dont nous pouvons réellement les configurer. Je vais vous le dire maintenant, les gars. Permettez-moi de passer à un autre fichier de la communauté Figma où je pourrai vous montrer, une fois que vous avez créé un projet en une seule couche, quoi cela ressemble essentiellement ici J'ai trouvé un fichier de conception , que je vais choisir de vous montrer en bref de ce que tout peut être fait ici. Je vais juste ouvrir celui-ci dans Pigma, comme le précédent, je vais juste le continuer avec mon e-mail ici Vous pouvez voir que c'est la page, c'est ainsi que vous pouvez commencer à créer votre page Web, essentiellement à partir d'ici. Comme vous le savez déjà, vous pouvez commencer à créer votre page. Comme vous pouvez le voir, par défaut, la page numéro cinq apparaîtra, juste après la première page. Ce que je vais faire, c'est que je ne créerai aucune page, mais pour vous montrer comment créer une page, je vais cliquer ici. Cette page. Comme vous pouvez le constater, je vous ai déjà dit que ce ne sont que des couches différentes. J'en suis maintenant à ma deuxième page. Ceci est la troisième page, et celle-ci est ma quatrième page ici. Celui qui a créé celui-ci a nommé ce cadre en particulier afin de ne pas le confondre ou des pages particulières en conséquence. Il s'agit de différentes couches situées sous chaque couche. Ils ont différentes options ici. Supposons que je veuille sélectionner cet élément particulier à l'intérieur. Permettez-moi de zoomer à l'aide de mes commandes et de ma souris. Je traîne juste l'intérieur avec mon outil à main. Je vais juste venir ici. OK, pour vous donner une meilleure vue de l'écran, supposons que j'aie sélectionné ce cadre en particulier. Maintenant, je veux déplacer ce cadre vers la droite ici. Vous pouvez voir que j'ai le choix ici, le X, Y avec un câlin. OK ? L' angle de rotation, les courbes, tout ce que je peux modifier à partir d'ici, ainsi que les contraintes de mise en page automatique. J'ai l' option de grille de couches à partir de laquelle je peux choisir différents styles de grille et je peux également la parcourir à partir des bibliothèques de navigation. Une fois connecté à mon réseau Wi-Fi ou à ma connexion Internet, je peux également y accéder, qui sont disponibles gratuitement. Sinon, je peux également créer mon propre style de grille à partir d'ici. Comme vous pouvez le voir, si je veux supprimer, je vais simplement cliquer sur celui-ci. J'ai aussi la couche, quel type de couche est-ce que je veux ici ? J'ai une couche différente. Comme vous pouvez le constater, cela ne me donne qu'un aperçu. Tout ce que j'ai, c'est supposer que j'ai deux ou trois couches ici. Une fois que j'aurai mis une couche au-dessus d'une autre, à quoi je veux qu'elle ressemble, je vous montrerai tout cela. Eh bien, je peux aussi sélectionner le remplissage signifie la couleur. OK ? Supposons que j' aie sélectionné une couleur rouge, cela me donnera ce type de couleurs à partir d'ici. OK, je vais prendre ça uniquement en blanc. Je ne veux pas tout gâcher d'ici. Je peux modifier l'opacité. Si je prends 50 et que je clique sur, d'accord, je peux changer l'opacité Et je peux aussi le diminuer si je veux le diminuer davantage. Si je veux voir ça et voir la différence ici, vous pouvez voir la différence ici. Supposons que je place du texte ici ou une case particulière, ou une couleur particulière dessus. Si je veux changer le trait de ce texte en particulier, tout ce que je peux faire, c' changer la couleur du trait à partir d'ici. Je peux également augmenter le trait, exemple si je veux augmenter le trait de l'intérieur, de l'extérieur ou du centre, je peux également le faire d'ici. J'ai également l' option des effets. À partir de là, j'ai des effets différents. Ombre supprimée, ombre intérieure, couche, flou d'arrière-plan Ici, vous pouvez voir le flou du calque sur le côté, il apparaît comme cette ombre intérieure et voici l'ombre portée Après avoir travaillé, je peux également exporter, comme je vous l'ai déjà dit lors du dernier cours, voici l'option des alignements. Je peux le faire. Permettez-moi de vous montrer ce X et ce Y. Supposons que je l'augmente, il se déplace simplement vers la droite De même, si je veux le déplacer à l'envers, je peux également le faire d'ici. Comme vous pouvez également le voir, je peux changer les angles à partir d'ici. De plus, si je veux le faire pivoter, je peux le faire pivoter en conséquence comme je le souhaite. Je peux faire tout ça. Je vais simplement le mettre à zéro. Ouais. Une fois que nous aurons fait ce travail, les nombreuses autres zones de texte permettront au bébé de mettre plus de texte ou de cadres. Nous serons en mesure d'ici, vous pourrez également en avoir un aperçu à partir d'ici. Comme vous pouvez le constater, après chaque option, j'ai également la touche de raccourci pour obtenir aperçu si je clique sur le bouton de la page précédente et sur l'espace. En même temps, je vais avoir un aperçu. Pour mon clavier uniquement, je n'ai pas besoin d'utiliser le nœud, mais je trouve que l'utilisation de l'archet est assez confortable. Je m'en sers. Je peux également partager mon travail particulier. Je peux en fait les inviter en utilisant n'importe quel e-mail à qui je veux envoyer Je peux également le sélectionner. Peuvent-ils modifier mon travail en particulier ou peuvent-ils uniquement le consulter ? OK, après cela, si je copie le lien et que je peux le partager sur n'importe quel média en utilisant le courrier électronique ou en utilisant n' importe quelle autre plateforme de réseau social importe quelle autre plateforme de réseau social comme Whatsapp Messenger, comme ça, je peux simplement leur donner le lien en copiant et collant dans leur page ici C'est la superposition. Comme vous pouvez le constater, après avoir créé un cadre, j'ai toutes ces options qui me permettent d'y placer différents composants. Comme j'ai des photos encadrées, j'ai aussi ce cadre. Vous pouvez voir, j' espère que vous avez compris les bases de l'utilisation d' une couche. Nous examinerons également ici l'option des actifs ici. Si je viens, je peux parcourir différents types de ressources, ou je peux simplement ouvrir la bibliothèque de l'équipe, ou je peux voir les composants locaux. Tout ce qui est utilisé ici, dans ce fichier en particulier ou dans ce projet. Je peux juste les voir d'ici. Comme vous pouvez le constater, ce travail en particulier projet assez soigné et bien réalisé Je peux le voir. Si je veux modifier quelque chose à partir d'ici, je peux les modifier comme je le souhaite, d'accord ? Pendant que je sélectionne ici, vous pouvez également voir sur mon écran qu'une icône particulière est sélectionnée. OK, si je clique dessus, vous pouvez voir que tout est sélectionné. C'est ainsi que nous pouvons essayer de concevoir ou simplement de conserver une couche et une trace de toutes les icônes que j'ai utilisées dans ce projet. Et là encore, j' ai les composants. OK, c'est la troisième page. Ceci est la dernière page ici. OK ? Ici, si je veux changer quelque chose, je peux sélectionner celui-ci. Je peux le sélectionner, il m'a simplement redirigé vers cette page. n'est pas ce que je veux. Je vais le supprimer. Je vais juste fermer celui-ci ici. Si je veux sélectionner quelque chose, je peux le sélectionner comme sur mon bouton. Si je veux le supprimer, je peux le supprimer et l'annuler à nouveau. En plus, j'ai également ces options ici , comme vous pouvez le voir. Si je veux modifier un objet, si je veux créer un composant, et aussi si je veux utiliser cette couche particulière comme masque ici. Si je souhaite créer un lien, je peux cliquer sur cette option et essayer de créer un lien comme celui-ci. D'accord, comme je vous l'ai déjà dit, en cas de texte, je peux en modifier la taille à partir d'ici. Je vais donc juste fermer celui-ci. Je peux sélectionner le texte réellement publié ou je peux modifier ou éditer le texte en fonction de mes besoins. Couleur de remplissage également, exportation du trait de remplissage. Il s'agit de l'option de prototypage. À partir de cette option de prototypage, je peux passer à ceci et je vais vous montrer brièvement comment vous pouvez prototyper J'espère que vous avez compris cette classe d'espace de travail et son interface. Maintenant, je crois que vous connaissez cette application. Lors du prochain cours, nous découvrirons tous ces outils de base que j'ai dans ma barre d'outils. Nous allons découvrir cela, toutes les utilisations de ce que nous pouvons faire avec ces outils particuliers. Ce dernier point va être intéressant, je crois. Et vous découvrirez également conception UI UX et en particulier cette application, des connaissances de base aux connaissances avancées Après avoir terminé ce didacticiel, vous aurez une bonne idée de la conception UI UX. Et nous serons également en mesure de créer votre propre conception de sites Web et d'applications mobiles. J'espère vous voir tous dans le prochain tutoriel. Prends soin de tout le monde et au revoir. 4. Outils de base dans Figma: Bonjour à tous et bienvenue dans un autre tutoriel de Figma Dans ce chapitre, nous en sommes au troisième chapitre et nous découvrons les outils de base de Figma Nous allons découvrir l'outil Move la Scale. Également à propos de l'outil de forme qui vous permet de créer différentes formes de faute de frappe , y compris un rectangle Comment pouvons-nous jouer avec toutes ces formes et les modifier en fonction du texte ? Comment pouvons-nous modifier un texte, créer un texte et le mettre dans votre cadre. Je vous ai également montré comment superposer ou renommer vos cadres et y afficher votre renommer vos cadres et y afficher votre travail sur le découpage et l'ajout d'une commande, ainsi que sur les ressources, les plug-ins et les widgets Ne perdons donc pas de temps et commençons par ce cours particulier sur Figma Comme vous pouvez le voir ici, j'ai un espace de travail vide avec cet espace de travail vide. Ce que je vais faire, c'est maintenant vous expliquer tous ces outils. abord, je vais utiliser cet outil de cadre avec mon deuxième cadre, je vais juste créer un cadre. OK, supposons que je ne veuille pas créer de cadre de ma taille. J'ai une taille particulière pour faire mes retouches. Ici, vous pouvez voir que j' ai différents préréglages. OK. Ici, j'ai un préréglage pour mon bureau, qui est Bankbook Air Ici aussi, vous pouvez voir la taille. Il existe un autre site Web où vous pouvez trouver différents types de tailles adaptés à vous ou à votre appareil. Vous pouvez simplement y inscrire le nom de votre appareil et ils vous indiqueront la taille de l'écran en question. Dans l' option téléphone, j'ai un Android grand et petit. Toutes ces options pour iPhone, si j'ai une tablette, j'ai tout ça. L'iPad D 8.3, la Surface Pro Eight. Si je fais une demande de montre, j'ai aussi cette taille d'écran. Maintenant que j'ai déjà sélectionné celui-ci, je vais créer un cadre ici. Après avoir créé le cadre ici, vous pouvez le voir dans le panneau de configuration, j'ai toutes les options pour modifier celui-ci. OK. Je vais peut-être prendre cette couleur, comme vous pouvez le voir. Je vais sélectionner celui-ci. J'ai la possibilité de faire tout cela. Non, si je veux l'assombrir, je veux créer le normal Je peux faire la superposition à partir d'ici, et je peux également la modifier à partir d'ici Si je clique ici, vous pouvez le voir s' éclaircir de 50 %. Si je ne veux pas voir cela, je peux simplement cliquer ici sur ce bouton en forme d'œil à partir d'ici Et j'ai aussi ce bouton oculaire ici. Juste à côté, j' ai le bouton de journalisation. Maintenant, je ne pourrai pas non plus le déplacer à l'aide de mon outil de sélection. Ou apportez des modifications , si tout se trouve dans cette boîte en particulier. Mais une fois que je l'ai déverrouillé, je peux réellement déplacer ce cadre en particulier, le positionner en conséquence. Et à partir de là, je vais également vous montrer si je veux le déplacer sur l'axe x ou sur l' axe y, je peux le faire. Je peux également le sélectionner si je souhaite le prendre en mode portrait ou en mode paysage. Voici comment créer un cadre. J'ai aussi cette option de traits. Si je veux changer le trait ici, vous pouvez voir que je suis capable de changer le trait, changer la couleur du trait. Si je ne veux pas voir celui-ci, je peux simplement cliquer à nouveau dessus. Celui-ci. Si je ne veux pas voir l'accident vasculaire cérébral. Encore une fois. Celui-ci. Si je veux voir d'ici, je peux modifier l'opacité de 50 Voici à quoi cela ressemblera. Si je veux que mon trait soit à l'intérieur, comme à l'extérieur, je peux cliquer dessus. Si je le veux au centre, je peux cliquer ici. Dans cette option, j' ai également l'option des effets. Si je veux créer un effet de flou, une ombre portée, ombre intérieure, j'ai tout cela ici. OK ? Celui-ci est l' outil de mise à l'échelle et la touche de raccourci pour cela est K. Si je clique sur celui-ci à partir d'ici, je peux simplement agrandir ou réduire cette image en particulier à partir d'ici. C'est assez simple et je vais vous le dire, supposons que je veuille créer un autre cadre, d'accord ? Je vais créer un autre cadre à partir d'ici. Comme vous pouvez le voir, je peux créer le cadre comme je le souhaite, d'accord ? Mais si je sélectionne cette option de cadre à partir d'ici, et si je clique sur Ctrl Shift puis que j' essaie de créer un cadre, mon cadre sera proportionnel, d'accord ? Je peux donc créer un cadre proportionnellement à partir d' ici. Si j'essaie de ne pas créer manière proportionnelle, vous pouvez voir que cela se passe dans l'autre sens Mais cela me donnera un cadre proportionnel ici. C'est ainsi que vous pouvez créer un cadre proportionnel. À partir de mon bouton de contrôle plus Shift, puis de maintenir ou de faire glisser le pointeur sur votre souris Je vais supprimer celui-ci. Celui-ci également. Prends ce cadre ici. Je peux renommer le cadre à partir d'ici en double-cliquant ici Sinon, au-dessus de ce cadre en particulier, je peux également cliquer ici. J'espère que vous en avez compris l' utilité et je vais vous montrer plus d'options ici. Le cadrage, vous l' avez déjà compris. Je crois celui-ci, d'accord ? J'ai la touche de raccourci pour cela, c'est l'outil de déplacement et l'outil de mise à l'échelle a également été compris par vous. Passons maintenant à la section, d' accord, ici, en l'utilisant, je peux créer une section particulière. Supposons que je crée cette section ici, et que je puisse simplement déplacer cette section particulière ici dans mon cadre, d'accord ? J'ai donc cette section maintenant dans mon cadre. OK ? Si je sélectionne celui-ci, ou si je le sélectionne, supposons que je reste ici, mette une couleur. Supposons que j'aie choisi cette couleur, elle n'a pas l'air bien. Oui, pas mal. OK, maintenant si je viens ici, cliquez dessus, encore une fois, fermez l'option de contenu du clip. C'est ainsi que cela me donnera un aperçu. Mais si je reviens ici sur le contenu du clip, il y a un changement que vous pouvez voir uniquement dans cette section avec le contenu du clip. Et c'est sans cela, voici à quoi cela ressemblera réellement, comme vous pouvez déjà le voir ici maintenant. OK, c'est juste au-dessus de celui-ci. Passons maintenant à l'outil Slice. Et la touche de raccourci pour cela est qu' il suffit de découper le cadre ou une zone particulière que vous souhaitez importer ou exporter. OK, si je choisis cette section en particulier ici, j'ai également sélectionné la tranche. Comme vous pouvez le constater, c' est l'endroit qui vient d'être occupé après l'avoir sélectionné. Si j'en viens à cette option d'exportation, comme vous pouvez le voir ici, c'est écrit, si je veux exporter cette tranche ici, d'accord, si j'exporte la première tranche ici, je vais vous montrer, revoir ceci, ce qui sera enregistré sur mon écran, juste une tranche à partir de l' endroit où j'ai une diapositive. Il sélectionnera simplement cette partie la même manière si je sélectionne la deuxième tranche, cela me donnera un aperçu car il n'y a rien. Je vais juste en trancher un aussi. OK, j'ai compris. Cette partie est également ici. J'ai toutes les formes ici. Si je veux créer une ligne, un rectangle, OK, je crée un rectangle, imaginez juste que je crée celui-ci à partir d'ici. Je peux créer différentes icônes. Si je le sélectionne, remplissez-le d'une autre couleur ici. OK, vous pouvez voir ici que je l'ai avec Alt. Je peux aussi le dupliquer. Comme vous pouvez le voir, j' ai dupliqué la même taille d'icône ici Après cela, je peux également créer des boutons avec ces formes. Dans cette ligne, je peux créer une ligne comme je le souhaite ici. Il y a une bonne chose à propos de Figma, elle vous montrera les alignements Comme vous pouvez le voir, il y a une ligne de couleur orange et rougeâtre ici, qui me montre l' alignement ici À partir de la ligne que je peux réellement mettre, si je veux mettre n'importe quelle sorte de flèche, je peux le faire ou tout l' aperçu, je vais l'obtenir ici. Et aussi celui-ci. Celui-ci. Et je peux également modifier la largeur ou la taille du trait à partir d'ici. OK, je peux faire tout ça aussi. J'ai aussi la flèche ici. Je peux simplement cliquer ou créer une flèche à partir d'ici. Si je le sélectionne ici, vous pouvez voir que je peux également modifier l'opacité Je peux aussi le faire comme ça, triangle inversé dans le cercle, flèche, flèche en losange, rond, carré. J'ai ces options ici. Si je veux faire un cercle, je peux le faire de la même manière avec ce circuit en particulier. Comme vous pouvez le voir, je peux jouer. Mais si je clique sur control shift comme j'ai sélectionné celui-ci, pas de control shift, il sera créé proportionnellement. OK ? Ils me créeront un cercle proportionnellement. Après cela, passons au polygone. De la même manière, je peux créer un polygone comme celui-ci. Si je veux le déplacer dans n'importe quel cadre, je peux aussi le déplacer. OK ? Ici, vous pouvez voir qu'une fois que je l'ai fait, ces choses sont encadrées, d'accord ? Toutes ces choses sont regroupées dans le cadre 1. Comme celui-ci est à l'intérieur, je peux modifier le réglage à partir d'ici. Si je souhaite modifier un paramètre de ce cadrage en particulier, je peux le faire à partir d'ici Supposons que je veuille modifier la rotation à partir d'ici, et tout y sera inclus. Comme il s'agit du premier cadre, je l'ai compris. Passons au début. À partir de là, je peux créer une étoile si je le souhaite. Ici, vous pouvez voir que j'ai ces options où je peux élargir cela ou jouer avec tout cela Si je veux augmenter le nombre ici, vous pouvez voir que je peux également augmenter le nombre. Ici, je peux aussi jouer avec celui-ci. Et si je veux placer une image ou une vidéo, je peux simplement cliquer sur cette option particulière. Ou depuis mon clavier, je peux ensuite cliquer sur Control Shift. Voyons voir ici les outils de création. Sous Outils de création, j'ai l'outil stylo et l'outil crayon. Si je prends le stylo, vous pourrez voir que je peux créer différentes formes à partir d'ici. Comme vous pouvez le constater en conséquence. Comme je le souhaite ici, je l'ai créé, je peux aussi le plier. Si je veux, comme vous pouvez le voir ici, je peux créer différentes choses à partir d'ici. OK, si j'en ai fini, je clique sur. Ou si je veux plier quelque chose, c'est l'outil Bend. Je peux aussi m'en servir. OK. Si j'en ai fini, je peux cliquer ici. Laissez-moi vous montrer l'outil à crayons. Un outil à crayons, c'est juste une écriture humaine. Si j'écris juste Igm, je suis désolée, mon écriture est trop mauvaise. Je vais supprimer tout cela d'ici. Cliquez sur le bouton Supprimer ici, et celui-ci est supprimé. Celui-ci également. Si vous avez compris l'utilisation du stylo et du crayon, la touche de raccourci permet uniquement de déplacer le crayon plus P. Il vous suffit d'inclure un décalage avec le P pour sélectionner votre outil crayon. Passons ensuite à cet outil de texte. Ici, une fois que j'ai sélectionné l'outil de texte, je dois créer une boîte particulière ici. À partir de là, je peux simplement taper n'importe quoi, comme je vais taper Mon tutoriel sur les outils de base tel que j'ai écrit celui-ci. Si je sélectionne cet élément en particulier à partir d'ici, je peux réellement sélectionner la police. D'accord, je peux sélectionner la police et je peux également sélectionner une taille particulière. OK ? Quelle taille est-ce que je veux ici ? J'ai celui-ci. Je peux également modifier l'alignement, et il y a beaucoup d'autres choses que nous allons apprendre ici. J'ai deux lignes. Je peux également augmenter ou diminuer la taille de la ligne à partir d'ici. Comme vous pouvez le voir, d'accord, je peux également modifier la largeur à partir d'ici. Je peux sélectionner la police ici. Comme vous pouvez le voir, je peux faire tout cela ici, comme une fois que j'ai sélectionné mon texte, j' utilise cette option de texte particulière. Et je peux aussi ajouter de la couleur , créer des effets de trait , que nous apprendrons plus tard. Avec ça, je vais le mettre ici. OK. J'ai également appris comment utiliser l'outil de texte. Pour l'outil texte, la touche de raccourci provient de votre clavier. Ensuite, nous passerons aux ressources. Si je clique sur les ressources, je peux obtenir un autre type de plugin, un autre type de widgets. À partir de là, les plug-ins sont très utiles. Je vais vous montrer quelques-uns des plugins qui sont très utiles et pratiques à utiliser. OK, donc ici, à l'aide de l'outil manuel, je vous ai déjà montré comment nous pouvons nous déplacer ici, comme dans cette page, comme avec cet outil de sélection, vous pouvez simplement vous déplacer. OK. Mais ici, en utilisant l'outil manuel, supposons que vous ayez une page complète de travail et que tout va bien, que vous ayez créé autant de cadres et que vous ayez fait tant de choses ici. Il ne vous reste plus qu'à vous déplacer avec votre outil à main, c'est un outil très pratique. Le dernier outil de la barre d'outils est une section de commentaires. Si je sélectionne celui-ci, vous pouvez voir qu'il y a une zone de commentaire ici. Supposons que je veuille mettre un commentaire ici. OK, donc ici je peux cliquer et j'écrirai Changer, changer la taille et la couleur de la police . Si je veux mentionner quelqu'un, après avoir ajouté son nom, ceux qui font partie de mon groupe avec lesquels je travaillerai, je peux vraiment le mentionner. Si je veux mentionner tout le monde après le tarif, je peux aussi indiquer que tout le monde est d'accord ici. J'ai aussi différents emoji. Comme vous pouvez le voir ici, j'ai différents Mogi que je peux utiliser en conséquence Tellement d'images différentes, pas seulement des emojis faciaux, mais aussi des animaux, des snacks aux fruits et bien d'autres encore Ici, j'ai aussi quelques mots. OK. Que je peux utiliser. Je peux même faire des recherches, donc je peux faire tout ça d'ici. C'est également un outil très pratique si je clique sur Enter ou si je clique ici, vous pouvez voir que j'ai téléchargé un commentaire ici. Si j'ai mentionné quelqu'un, il recevra une notification indiquant que je l'ai mentionné dans mon projet, qu'il doit faire quelque chose ou que j'ai donné des conseils ou quoi que ce soit d'autre. Cela apparaîtra dans cette boîte ainsi que dans leur boîte, afin qu' ils puissent le voir où que je fasse cela. D'accord, à partir de là, je peux aussi le modifier. Eh bien, je peux même supprimer celui-ci. Je vais juste supprimer celui-ci. J'espère que vous connaissez maintenant bien tous les outils de la barre d'outils. Vous pouvez maintenant créer un fichier de base à l'aide de cette application Figma J'espère que vous avez tous compris. Rendez-vous tous dans le prochain cours ou dans le prochain tutoriel. Dans ce chapitre, nous apprendrons bien d'autres choses intéressantes sur cette application particulière de conception d'interface utilisateur et d'expérience utilisateur. D'ici là, prends soin de toi. Au revoir. 5. Comment utiliser les pages dans Figma: Bonjour à tous et bienvenue à tous pour un autre tutoriel dans Figma Nous en sommes maintenant au quatrième chapitre, et je vais vous montrer comment utiliser les pages dans Figma Dans le dernier cours, je vous ai parlé ou vous ai donné une idée de base de tous les outils, alors quelles sont leurs utilisations dans cette application en particulier ? Ici, dans ce cours, je vais vous parler des pages. Vous pouvez ajouter une page. Comment copier un contenu particulier d'un projet à un autre à l'aide de la méthode copier-coller. Et comment vous pouvez réellement mettre autant de cadres ou de composants, autant de vecteurs dans une page donnée. Et comment vous pouvez réellement travailler en vous montrant quelques exemples de la communauté de Figma Ne perdons pas de temps ici. Commençons par ce cours. Maintenant, je suis sur la page d' accueil de Figma. Comme vous pouvez le voir ici, j'ai la communauté Explore. Et j'ai pris en charge deux des projets, comme des designs. J'ai pris deux de ces designs pour vous montrer comment cela fonctionne réellement, exemple à quoi servent les pages ou comment vous pouvez réellement utiliser les pages dans votre travail. Comme vous pouvez le voir, j'ai pris ce premier dessin ici. Vous pouvez voir qu'il a quatre pages ici. OK. Ici, il a quatre pages. Si vous souhaitez ajouter d' autres pages à partir d'ici, vous pouvez simplement venir ici et cliquer sur cette page à partir d'ici. Comme vous pouvez le voir, une fois que j'ai cliqué sur une nouvelle page, j'ai pu créer une nouvelle page Je le suis en conséquence. OK. Supposons que je sois juste classe de pages, je vais juste le dire. Maintenant, ce que je veux faire, c'est créer un cadre. À partir de là, je vous ai montré comment créer un cadre car vous avez également des préréglages ici Je vais prendre un ordinateur de bureau, j'en prendrai 12, 18 à 832 Ici, j'ai cette page en particulier. Comme vous pouvez le constater, une fois que j' ai créé cette page, mon cadre est là, mais sous mon cadre, je n'ai rien car je n'y ai pas mis cases ni de prises. Maintenant, laissez-moi créer une boîte. Comme vous pouvez le voir, où j'ai créé cette boîte ou cette forme dans le cadre de mon cadre. La boîte rectangulaire arrive juste en dessous de chaque cadre. OK ? Par rectangle, la boîte se trouve juste en dessous du cadre. Et maintenant, je peux essentiellement le nommer comme je veux. OK ? Je vais juste écrire des decks. Arrête. Je vais garder celui-ci ici. Vous pouvez voir que je peux vraiment lui donner de la couleur comme je le souhaite. Donnez également à celui-ci une couleur différente. OK, laisse-moi prendre cette couleur. Comme vous pouvez le voir, j'ai cette page. OK ? C'est ainsi que vous pouvez réellement utiliser une page. Et nous pouvons également créer différentes pages ou différents cadres dans la même page. OK ? Si je fais juste un zoom arrière en utilisant le contrôle, une souris ici, vous pouvez voir que j' ai un cadre ici. Si je veux reproduire la même page de la même taille, je vais d'abord cliquer sur Ancien Je vais choisir ce cadre. Je vais cliquer sur Ancien. Une fois que j'ai cliqué sur Vieux, vous pouvez voir sur ma souris que j'en ai deux. C'est ainsi que je peux reproduire le même cadre. Encore une fois, je vais le sélectionner et je vais le déplacer avec mon outil à main. Je vais juste déplacer l'écran que je peux vous montrer au milieu. Qu'est-ce que tu as compris ici ? Comme ici, nous avons compris qu'à l'intérieur d'une page, nous pouvons créer tant de cadres, autant de vecteurs. Nous pouvons également mettre autant d'animations de texte, d'icônes. D'accord, je vous ai également montré comment créer une page. Permettez-moi de vous montrer si j' ai le même nom et comment je peux réellement changer cela. OK, à partir d'ici. Je vais cliquer ici pour passer à celui-ci sous forme de trois. Que je ne m'y perds pas ici. OK ? Supposons que j'aie aimé tout ça. OK ? Supposons que j'aime ce logo en particulier. Ou laissez-moi revenir à cette page et je veux prendre cette image particulière sur ma propre page. Pour cela, je vais soit cliquer sur le contrôle C, qui est une copie. Sinon, je peux simplement venir ici, cliquer sur Copier à partir d'ici, et revenir à cette page avec mon outil de sélection, sélectionner cette case particulière et la coller ici. OK, comme vous pouvez le voir, une fois que je l'ai collé, il est également arrivé sur ma page Par conséquent, je peux également prendre ou recommander grand nombre d'autres projets de l'option communautaire. Si je vais ici, supposons que je me laisse d'abord zoomer avec ma tête pour me permettre de déplacer celui-ci d'ici et d'ici. Vous pouvez voir comment il est réellement utilisé. Ici, il a d'abord sélectionné les couleurs qu'il devait utiliser. OK ? Voici les couleurs qu'il va utiliser. Il s'agit du type de police qu' il utilisera pour le titre. Et ce sera le type ou la taille de police pour le corps. Et si vous voulez utiliser une petite lettre, il utilisera cette police. Ce sont différents types de composants qu'il utilisera. Il s'agit de l' outil de navigation qui sera utilisé, du système de diviseurs et des différents types de zones de texte si vous souhaitez placer zone de texte spéciale ainsi que des boutons haut et Il vient de se faire un beau plan avant de créer une application mobile ou tout type de site Web Une fois que vous avez terminé, comme une fois que vous avez fait tout cela, il devient assez facile pour vous de travailler sans avoir à le bannir de la taille ailleurs pour qu'il reste le même. Vous voyez ici, il a si parfaitement répertorié tous les commutateurs qu'il utilisera. Ici, vous pouvez voir qu'il a sélectionné deux commutateurs à partir d'ici, les atomes du groupe radio, ce dont tous les éléments sont nécessaires. Il les a en fait mis dans le bon ordre pour ne pas s'y perdre. Ici, vous pouvez voir des graphiques et ici il mettra un histogramme. Mais ici, il est bientôt écrit qu'il travaillera là-dessus plus tard. C'est ainsi que nous devrions réellement travailler. Avant de démarrer un projet, nous devons essentiellement établir un plan pour nous-mêmes, auquel nous pouvons nous référer et travailler en conséquence Ici vous pouvez voir ce logo d'ici, ceci est une autre page. Ce n'est pas la première page, OK. Voici une autre page qu'il a prise et qu'il a essayé de faire le travail de démonstration à partir d'ici. Supposons que si je place cette page ici, je peux la déplacer vers le bas à partir d'ici en dessous. De plus, j'ai des titres différents. Supposons que je veuille déplacer ou copier quoi que ce soit dans cette page en particulier. Ce que je peux faire, c'est que je peux simplement cliquer sur Options de collage ici et l'option Copier est également là. Tout dépend de ce que je veux faire ici. Permettez-moi d'en venir ici à cette autre conception Web. Si je viens, si je passe à cette option d' actifs à partir d'ici, comme vous pouvez le voir, il a utilisé tous ces actifs ici. Si je veux utiliser cet actif en particulier, je peux simplement cliquer ici ou sélectionner ce C. Au lieu de cela, laissez-moi prendre celui-ci d'ici. OK, parce que ça va avoir l'air, je vais l'apporter ici. Retournez à ma classe de pages de couches. Ici, je vais juste appuyer sur la touche C , vous pouvez voir l'écriture. Je l'ai ici. Je peux augmenter la taille si je le souhaite. Pour cela, je dois zoomer et augmenter la taille en fonction de mes besoins. Avec mon outil de déménagement, je peux simplement me déplacer ici. Je peux également changer de couleur si je le souhaite. Permettez-moi de prendre une couleur noire. Permettez-moi de mettre ça en haut. OK, voilà. Maintenant, j'en ai un extrait par texto. Je peux le mettre quelque part entre les deux. Oui, ça a l'air plutôt bien. Je peux aussi le faire avec d'autres appels. OK, ici, ils nomment ce cadre comme espace réservé. Je peux essentiellement supprimer celui-ci. Je peux mettre tout ce que je veux. OK, supposons ce script complet. À partir de là, je peux cliquer sur Contrôle, revenir en arrière et cliquer sur Contrôle ici. Vous pouvez voir que j'ai la page complète ici ou l'image complète. Je peux vérifier la taille d'ici. OK, je peux diminuer la taille comme je le souhaite. Il s'agit du format de page. Si je veux diminuer le rayon, je peux également le diminuer. C'est ainsi que nous pouvons travailler avec la page et créer notre propre design. Et nous pouvons également installer tout ce que nous voulons. J'espère que vous avez compris l'utilisation des pages et comment nous pouvons copier-coller, comment nous pouvons prendre différentes pages et mettre du contenu sur notre page. Fondamentalement, à l'intérieur des pages, nous avons des cadres, et sous les cadres, nous avons tous les autres composants. Nous allons en apprendre davantage sur les composants et les vecteurs de masquage. Je vous ai déjà expliqué comment utiliser les formes. Nous allons découvrir tout cela. Tout dépend d'une séquence et de la façon dont nous travaillons réellement dessus. Découvrez tout dans le prochain cours où nous apprendrons comment créer un prototype dans cette application. Figma. Rendez-vous tous au prochain cours. Prends soin de toi. Au revoir. 6. Comment faire du prototypage dans Figma: Bonjour à tous et bienvenue dans un nouveau tutoriel sur Figma Nous en sommes maintenant au chapitre numéro cinq et nous allons apprendre comment vous pouvez vous lancer prototypage dans cette application Le prototypage, c'est comme créer une application dans laquelle il suffit de faire défiler la page pour passer à la page suivante C'est ce que je vais faire et nous vous montrerons comment nous pouvons prévisualiser votre travail, comment nous pouvons présenter votre travail et comment vous pouvez également modifier votre travail pendant le prototypage Ne perdons pas de temps, commençons par ce cours ici. Comme vous pouvez le voir, j'ai trois Frap ici Ceci est juste une page. Je vais vous montrer comment vous pouvez prototyper entre ces pages. abord, ce que je vais faire, c'est sélectionner ce cadre en particulier. Après avoir sélectionné ici, vous pouvez voir l'option de conception, juste à côté de l'option de conception, j'ai l'option de prototype. Ici, vous pouvez voir que j'ai l'option prototype. Si je clique ici, vous pouvez voir l'organigramme, les interactions et tout le reste. Mais ce que je vais faire, cliquer sur ce côté positif et je vais me joindre à celui-ci. J'ai ces points positifs ici, je peux participer à ces quatre aspects. D'accord, le prototype est en gros assez vaste, mais je vais juste commencer par le prototype juste pour vous montrer comment cela fonctionne réellement. Comme la façon dont vous pouvez commencer à créer votre propre application ou n'importe quelle page Web. Ils me demandent comment je veux naviguer. Je veux avoir envie d'aller de l'avant. Je vais cliquer sur cette application d'entraînement. Bien, au contraire, c'est bien aussi. Voici quelques-unes des animations qui s'y trouvent. Je vais suivre un bref cours à ce sujet. Ici, c'est en un clic. Je vais juste mettre ce lien ici comme je fais ce côté avec ce côté, je vais rejoindre cette page ici. OK, j'ai celui-ci aussi. Maintenant, comme vous l'avez vu, j'ai ceci. Maintenant, je veux voir comment cela va passer d'une page à l'autre. OK, pour cela, vous pouvez voir que j'ai une icône ici. D'accord, ici, il y a essentiellement deux icônes. Le premier est présent et l'autre est Preview. Il existe une grande différence entre le présent et l'aperçu. Si je clique sur Présenter, j'aurai une boîte différente ici, comme une fenêtre différente si je clique sur Présenter, voyons à quoi cela ressemblera. Ensuite, je vais vous montrer à quoi ressemble un aperçu et en quoi il est différent. Ici, vous pouvez voir que j'ai celui-ci. Si je clique dessus, je peux simplement changer. OK. Comme vous pouvez également le voir manuellement, je peux cliquer ici et voir à quoi ressemble ma page. OK, voilà, supposons que j' ai ces icônes ici. Si je tape juste, je passe à l'autre page. J'espère que vous avez compris comment vous pouvez le faire manuellement. Nous pouvons également revenir en arrière, mais supposons que je veuille modifier cette écriture particulière à partir d'ici. Dans ce cas, à chaque fois je ne devrais pas revenir en arrière ou simplement annuler ces pages en particulier. Ce que je peux faire, c'est venir ici. Supposons que je souhaite sélectionner cette option ou que je souhaite sélectionner cette case. Et je veux réduire la taille de cette boîte. OK ? Réduisez la taille. Quelque chose comme ça. Je veux donc simplement supprimer cette case. OK, juste pour vous montrer un exemple, je vais simplement cliquer sur Supprimer. Maintenant, vous pouvez voir que ma page commence ici. OK ? Dans ce cas, ce que je vais faire, c'est que si je viens ici sur cette page, vous verrez que ma première page ressemble beaucoup à ceci. Je n'ai pas eu à supprimer cette première page ou à annuler cette première page pour voir les modifications. le même cas, si je souhaite changer une couleur ou quoi que ce soit en tant que tel, je peux simplement accéder à l'option de conception de cette option de champ. À partir de là, je peux prendre toutes les couleurs que je veux. Vous pouvez voir que j'ai cette couleur particulière ici. Je peux simplement le sélectionner car j'ai cette couleur. Je peux également prendre cette couleur dans tous ces cadres. D'accord, je vais prendre la même couleur que celle-ci ici. Vous pouvez voir que j'ai la couleur et que je peux changer le motif à partir d'ici. Ici, si je veux prendre une couleur différente pour le film, je peux le faire aussi à partir d'ici. D'accord, toutes les cases aussi, je peux mettre différents types de couleurs à partir d'ici. OK, donc j'espère que vous avez compris comment vous pouvez créer le prototype et comment vous pouvez voir cette page, accord, comme vous pouvez le voir, une fois que j'ai apporté quelques modifications ici, elle a également été modifiée. C'est ainsi que cela fonctionne réellement. C'est ainsi que vous pouvez obtenir un cadeau ou voir notre travail dans un nouvel onglet. Mais si je veux voir un aperçu, voyons ce qu'il fait. Si je clique sur Aperçu, j'aurai une fenêtre juste à côté de mon travail ici. Cela ne créera pas de fenêtre différente, mais au lieu de cela, cela me donnera juste un aperçu. Dans n'importe quel couloir où je vais placer ici, vous pouvez voir ma boîte de prévisualisation qui vient de se charger. Vous pourrez voir qu'elle me donne une mise à jour en direct de mon aperçu. À partir de là, je peux ouvrir celui-ci en mode présentation, ce que je n'ai pas à faire car je l' ai déjà ouvert ici. Je peux également intégrer cela au rapport hauteur/largeur du cadre. Je peux le faire manuellement à partir d'ici. Si je tape simplement dessus, il passera de la première page à la deuxième. De la deuxième à la troisième. 7. Options de facilitation et animation de prototype: Bonjour à tous et bienvenue dans un nouveau tutoriel sur Figma C'est le sixième chapitre et nous allons découvrir options simples et l' animation des prototypes. Comme dans le dernier cours, je vous ai montré comment commencer par prototypage et relier des images à des images Dans ce cours, nous allons apprendre comment vous pouvez réellement animer ces cadres lorsqu' ils apparaissent à l'écran Et un bouton en particulier peut vous mener à une autre page. Je vais vous montrer comment vous pouvez le faire. En dessous de cela, je vais vous montrer bien d'autres options. Que peut-on utiliser dans cette application particulière pour créer une application mobile ou une application Web ? Ne soyons pas du genre humide, et commençons par cette classe en particulier. Encore une fois, je suis de retour sur ma page d'accueil de Figma et je vais vous montrer les gars à partir d'ici OK, comme vous pouvez le voir, j'ai ces cadres maintenant, je vais faire du prototypage à partir de là, mais ce sera très différent car je vous ai dit que si je clique, je peux accéder à cette page en particulier, qui peut être n'importe où OK, supposons que je veuille accéder directement à cette page. Si je clique sur ce bouton en particulier, laissez-moi simplement zoomer sur ce bouton. J'ai sélectionné celui-ci. J'ai une faute d'orthographe. Je vais juste ajouter ici. Comme j'ai ce bouton en particulier ici, ce que je vais faire, c'est d'abord faire un zoom arrière si je clique sur celui-ci. Si je passe à mon prototypage, comme vous pouvez le voir, j'ai le côté positif. Ce que je ferai, c'est qu'une fois que j'aurai cliqué sur ce bouton en particulier ici, je passerai sur cette page. C'est ce que je veux. OK, vous pouvez voir ici que j' ai de nombreuses options. Par exemple, si je veux naviguer sur deux pages, si je veux revenir en arrière et si je veux revenir en arrière et quelle animation je veux parcourir. Dans cette page, je veux que vous puissiez voir les trois dernières pages. De plus, je l'ai ici. Je vais cliquer ici. Je vais également choisir cette option à partir d'ici. OK, ici, vous pouvez voir aperçu de ce à quoi cela ressemblera réellement, comme vous pouvez le voir d'ici. Je peux aussi le modifier si c'est sorti. Permettez-moi de vous le montrer en vous donnant juste un aperçu. OK, je vais juste cliquer ici. Prenez l'aperçu. Comme vous pouvez le voir, il est en train de charger. Mais ça va me donner ce truc ici en ce moment. Si je clique sur cette respiration ici, tu peux juste te détendre. Si je reviens en arrière et change cette chose en particulier en instantané. Maintenant, si je reviens en arrière et si je clique sur celui-ci, il y a un changement instantané ici. Voici l'animation ou la façon dont nous pouvons réellement l' animer en un clic Parfois, on a juste envie de D, d'accord ? Dans ce cas, je peux cliquer sur celui-ci, en particulier celui-ci est utilisé en cas de pop-ups. Si je veux faire glisser quelque chose ou passer à la page suivante, je peux faire comme ça. OK, ici, j' ai ces options. Voyons les choses une par une, d'accord ? Si je clique sur Dissolve ici, vous pouvez voir l'aperçu de la façon dont il se dissoudra lentement. OK, permettez-moi de revenir ici sur cette page. Si je clique sur la respiration ici, tu peux voir que c'est juste en train de se dissoudre D'accord, je vous expliquerai l'option d'animation intelligente plus tard, car c'est un peu délicat Nous le garderons juste pour la prochaine phase du cours. Voici une autre option appelée déménagement. Voilà comment cela se passera si je clique sur ma page ici, laissez-moi revenir en arrière. Cliquez ici Donc ça va se passer comme ça, comme vous pouvez le voir d'ici. De plus, je peux réellement modifier le calendrier. OK, comme ça, ça prendre combien de secondes ou de millisecondes Je vais donner 450 millisecondes. J'ai dit celui-ci. Maintenant, revenons en arrière . Cliquez ici Comme vous pouvez le constater, il est apparu un peu lentement. Tout dépend de votre application ou du type d'application mobile que vous créez, sur quoi elle est basée, etc. Ici, je peux voir toutes ces options. Si je choisis les limites, si j'y retourne maintenant OK, si je clique ici, vous pouvez voir les combats ici sur mon écran, je peux choisir parmi tout ça. Si je veux que ça arrive lentement, ça viendra comme ça. À partir d'ici, ça va se faire lentement. Et tout à coup, ça va juste apparaître sur mon écran. Je vous montre juste toutes les options que nous avons ici. C'est une autre façon dont je veux que cela apparaisse rapidement. Si je clique sur celui-ci, il apparaîtra comme ça. Et si je veux que ça arrive doucement comme ça, ça aura l'air correct. De quel côté est-ce que je veux qu'il apparaisse ? Supposons que je l'ai donné d'ici. Maintenant, vous pourrez voir que cette page apparaît de la droite, pas de la gauche, elle apparaît de la droite. Et dans ce cas, si je le mets en haut, il apparaîtra par le haut. Ou il apparaîtra du bas vers le haut. OK, permettez-moi de cliquer sur « Oui ». Et celui-ci est tout le contraire de celui-ci. C'est ainsi que l'on peut travailler ici sur toutes ces applications. OK, j'espère que vous avez compris. Et si vous voulez changer quoi que ce soit, supposons que cette chose en particulier je puisse voir d'ici, je puisse plonger comme je veux. C'est fini si je choisis celui-ci, si je veux voir l'aperçu, c'est comme ça que ça arrivera. Vous pouvez également voir l'aperçu ici dans cette boîte. D'accord. Si je veux revenir en arrière, je peux cliquer ici. D'accord. Et maintenant, essayons de prototyper les quatre pages que j'ai ici. OK, donc avec mon outil à main, je vais juste déplacer un peu cette boîte. OK, revenez à ma première page et comme je vous l'ai déjà dit, vous n' avez pas à fermer votre aperçu ou votre cadeau lorsque vous apportez des modifications. Si je viens ici sur le prototype et que je choisis à nouveau mon outil de sélection, vous pouvez voir ici qu'il s'agit du bouton de la page entière. OK, je vais vous montrer si je dois simplement reconnecter celui-ci à cette page. Et je vais vous donner tous les liens ici. Comme j'ai l'option de relaxation, je vais choisir celle-ci et je peux également choisir le texte si je le souhaite, mais je vais simplement sélectionner la case car mon texte se trouve à l'intérieur de la boîte. Je vais prendre celui-ci. Je vais l'apporter ici. À partir de là, je peux animer comme je veux, je veux que cela apparaisse OK, dans cette page, je veux qu'il soit dissous. Je vais fixer le chronométrage à 400. Il faudra 400 billets pour dissoudre la respiration. Je l'ai déjà mis ici pour le yoga, car j'ai cette option ici, le yoga. Cliquez dessus et cela m' amènera à la page de yoga. Comment puis-je réellement supprimer celui-ci, c'est d'abord, laissez-moi sélectionner une case ici dans cette case. Je peux maintenant sélectionner cette page ici. D'accord. Ici, vous pouvez voir que j'ai tout cela dans toutes ces boîtes. Vous pouvez voir que j'ai aussi le bouton Home. Je vais m'assurer qu' une fois que j'aurai cliqué sur ce bouton d'accueil ou sur cet onglet d'accueil en particulier, je vais simplement m'y intéresser. Onglet d'accueil ici. Déplace ça avec ça ici. Comme vous pouvez le voir, je le veux pour nous. Accédez à cette page ou connectez-vous à cette page. Comme vous pouvez le voir, l'option plus est ici, je vais simplement me connecter ici sur cette page, comme vous pouvez le voir d'ici. De plus, je peux changer, je vais juste garder ça de côté et je vais le mettre en place à partir d'ici. De plus, je vais prendre ce bouton, je vais prendre celui-ci ici. Jusqu'à présent, je ne suis pas en mesure de le sélectionner. Comme j'ai sélectionné celui-ci, je vais l'apporter ici. Ce n'est qu'à partir de là que je peux choisir la manière dont je veux animer, car j'ai redirigé tout cela vers ma page d'accueil Laissez-moi en avoir un aperçu. OK, c'est comme ça que ça va se passer. Ici, vous pouvez le voir par navigations de tout ce que je veux. Voyons voir la critique ou je vais simplement couper l'aperçu. Je vais juste le présenter dans un autre panel ici. Vous pouvez voir qu'il est en train de charger ici, comme vous pouvez le voir, je l'ai. Si je clique sur cette relaxation, vous pouvez voir que je suis allé sur la page de relaxation. Si je descends, si je clique sur celui-ci ici, vous verrez que je suis de retour sur ma page d'accueil. Si je clique sur cette option de respiration, je l'affiche ici sur la page de respiration. OK, à partir de là encore, si je reviens et que je clique sur ce bouton d'accueil, vous pourrez revenir à la page d'accueil. Si je clique sur ce bouton de yoga, je reviens également sur cette page. Si je souhaite revenir à ma page d'accueil, je vais cliquer ici. Je peux revenir sur cette page en particulier. Il y a tellement d'autres options pour cela. Nous devons créer plus de cadres pour vous montrer un exemple du fonctionnement réel de ce prototypage J'ai une émission, j'espère que vous l'avez comprise pour vous donner les connaissances de base sur le prototypage et sur cette animation que j'ai montrée Encore une fois, passons à ce fichier principal ici. Si je veux changer quelque chose à partir d'ici, je peux le changer. Accédez simplement à l'option de conception. Vous ne pouvez plus voir les liens entre ces quatre pages ici. Je suggérerai toujours de nommer correctement votre page pour ne pas vous y perdre. Parce que lorsque vous créez une petite application ou une application plus grande, vous devez toujours vous assurer de ne pas vous tromper entre vos personnages ou entre vos cadres. Que cela créera un désordre et que vous ne pourrez pas savoir où vous êtes censés vous mettre. Dans ce cas comme peut-être dans le troisième chapitre, vous avez été montré , un gars que j'ai emprunté à la communauté de Figma J'ai pris un projet et je vous ai montré comment il a réellement commandé ses œuvres. Il a choisi une couleur particulière qu' il utilisera, les cassettes, les icônes, tous les dessins les ont dans une colonne. Dans chaque cadre, il a simplement indiqué les polices qu'il allait utiliser, les tailles, tout le reste. Nous devons tout définir avant de créer une application. Maintenant, si je veux supprimer celui-ci, comme les liens correspondants, encore une fois, je dois venir ici dans le prototype. Sur ce prototype, vous pouvez voir que j'ai tous ces liens ici. OK, vous pouvez voir ici que j'ai tous ces liens. Si je souhaite supprimer un lien d'ici, je peux simplement cliquer ici et je peux cliquer sur le bouton moins ici si je ne le souhaite pas. Dans ce cas, je peux simplement sélectionner cette ligne particulière sur laquelle j' ai connecté les cadres. Je peux simplement cliquer sur cette ligne et cliquer sur Supprimer. OK, c'est comme ça que je peux supprimer. Je vais juste annuler celui-ci à nouveau. Ici, vous pouvez voir que c' est ainsi que nous pouvons être une simple application mobile à l'aide du prototypage J'espère que ce cours était clair et que vous pouvez maintenant créer votre propre application mobile. Je vais juste vous dire de commencer par quelque chose de simple. Essayez simplement de créer une application simple. Essaie celui-ci après ça. Une fois que vous serez habitué à cette application, optez pour quelque chose de complexe qui vous habituera à cette application, qui ne posera aucun problème lors de la fabrication du produit final. J'espère vous voir tous dans le prochain tutoriel où nous en apprendrons davantage sur les délais et l'animation intelligente. Ce que je veux dire par animation intelligente, c'est supposer que j'ai cette icône particulière, ou n'importe quel type d'image à l'intérieur de ma page, dans cette cage. Si je clique dessus, il apparaîtra sous forme animée. Dans le prochain cours, je vous montrerai également comment nous pouvons réellement le faire dans notre application particulière. Prends soin de tout le monde. Au revoir 8. Animation intelligente: Bonjour à tous et bienvenue à tous un autre tutoriel figma ici C'est le chapitre numéro sept et nous allons en apprendre davantage sur l'animation intelligente. Par exemple, vous pouvez simplement déplacer dans un outil ou un objet en particulier à l'intérieur de votre cadre et animer le fait qu'il tombe correctement. Et d'une belle façon, nous allons apprendre tout cela dans ce cours en particulier. Ne perdons pas de temps et commençons par cette leçon particulière ici. Encore une fois, revenez sur la page d' accueil de Figma. Maintenant, dans le dernier cours, je vous ai déjà expliqué comment nous pouvons réellement passer d'une page à l'autre. Maintenant, si vous vous en souvenez, je vous ai montré ce cours. Comme vous pouvez le constater, j'ai également le prototypage jusqu'à présent dans le dernier cours Si je clique ici, j'ai exempté cette option Ce cours porte essentiellement sur cette animation intelligente. Je vais également vous montrer comment retarder ce que c'est essentiellement Supposons que j'ai cette image ou ce cadre dans ma page principale ici. OK, donc ce que je vais faire, c'est que je voulais juste créer une animation pour ça. Nous verrons comment nous pouvons le faire. OK, pour commencer, ce que nous allons faire, c'est dupliquer une autre couche de ce cadre en particulier ici. OK, pour la duplication. Je vous ai déjà dit qu'il suffit de cliquer sur Alt. Lorsque j'ai cliqué ici, vous pouvez voir que j'ai deux souris OK, laissez-moi sélectionner le cadre entier. Cliquez sur l'option Alt ici, vous pouvez en voir une. OK, j'ai le double de cette couche. Laisse-moi juste passer de ce côté. Permettez-moi également de déplacer ce cadre particulier ce côté pour ne pas m'embrouiller. OK, ça amène celui-ci ici. Comme vous pouvez le constater, j' ai séparé les deux. Comme vous pouvez également le voir, celui-ci porte les deux un nom de relaxation sur ce cadre. Copie de mon premier cadre ici. Maintenant, je dois sélectionner l'objet que je veux animer. OK, maintenant je vais juste venir ici. Je souhaite animer cette image ou ce cadre en particulier. Dans ce cas, ce que je vais faire, c'est avant je vais sélectionner celui-ci. Je vais le relier à cet onglet de relaxation ici. OK, maintenant tu peux voir que j'ai celui-ci. Je vais venir ici et je choisirai l'option appelée option Smart Animate. Et ici, j'utiliserai l'option Is is out. Comme vous pouvez le constater, j'en ai sélectionné 400 ici. Je vais juste en faire 450. Et je vais cliquer sur OK. À partir d'ici. Comme vous pouvez le voir, j'ai celui-ci. Maintenant, comme je veux que celui-ci apparaisse lentement, je vais simplement faire glisser cette couche en dehors de celle-ci. OK ? Maintenant, celui-ci n'est pas dans ce cadre. Que se passera-t-il ici si je fais simplement glisser tout ça ici ? Tu vois bien que je dois me détendre. Je vais donc l' appeler relaxation 1 et celui-ci relaxation 2, d'accord ? Je vais donc enregistrer celui-ci et comme vous pouvez le voir maintenant, j' ai deux pages de relaxation et aussi une page de relaxation, d'accord ? L'un devrait être en haut et les deux devraient être ici. Et je vais garder ce cadre au-dessus de celui-ci, d'accord ? Je vais juste vous montrer un exemple si je fais simplement glisser ce cadre en particulier à partir d'ici, accord, supposons que je veuille le faire glisser. Maintenant, je vais juste passer au design. Prends ce cadre tel que je l'ai fait, emménage dans celui-ci, d'accord ? Il va juste rentrer dans celui-ci, d'accord ? Comme vous pouvez le voir maintenant, celui-ci est à l'intérieur. Mais une fois que je commence à le déplacer, vous pouvez voir qu'il sort d'un onglet de relaxation, mais je veux qu'il soit intégré. Comme je vous l'ai déjà montré, j'ai les prototypes. Vous voyez, j'ai également connecté celui-ci. Essayons maintenant de voir un aperçu de ce à quoi cela ressemblera réellement. Si je clique sur Présenter, cela me donnera une meilleure vue d'ici. Je vais cliquer sur la relaxation à partir d'ici. Si je clique à nouveau ici, cela apparaît comme ça. Oui, vous avez compris comment nous pouvons faire cela en gros. Mais ce que je veux, c'est que je n'aie pas à cliquer ici car j'ai cliqué comme vous pouvez le voir Permettez-moi de vous le montrer encore une fois. Une fois que j'ai cliqué ici, cette page est réapparue. Lorsque j'ai cliqué ici, seule cette image en particulier est apparue Mais ce que je veux, c'est que chaque fois que j' ouvre cette page ou l'onglet de relaxation, je veux qu'il apparaisse lentement. Dans ce cas, ce que je vais faire, c'est retarder un peu et je vais modifier les paramètres ici. OK, permettez-moi de revenir au fichier original ici. Une autre façon de procéder est de sélectionner ce cadre en particulier, et de supposer que je veuille l' apporter ici, d'accord ? Je vais l'apporter ici. Mais dans ce cas, je vais juste changer l'opacité, d'accord ? Alors laisse-moi juste changer l' opacité de celui-ci, d'accord ? Permettez-moi d'y aller, fixez ce cadre en particulier ici, zéro, d'accord ? Je ne vois pas ça du tout. Dans ce cas, je n'en ferai que dix. Si j'en fais dix également, je ne peux pas voir grand-chose. OK ? Je pourrai peut-être voir qu'il y a quelque chose comme 25 ici. Vous pouvez voir que j'ai une idée floue ici. Maintenant, si j'essaie d'avoir un aperçu de celui-ci maintenant, revenons ici. Si je clique dessus ici, vous pouvez le voir apparaître. Mais maintenant, comme vous pouvez le voir, encore une fois, je dois appuyer dessus juste pour avoir une vue. OK, ici j'ai déjà changé l'opacité. Je veux en faire plus. Laissez-moi faire 50 % OK, voyons maintenant l' aperçu. À partir de là, je vais cliquer dessus, voici comment cela apparaîtra. Ou si je veux juste changer l'opacité et l' appliquer à cet endroit, je peux le faire aussi Viens ici, sélectionne le cadre entier. Après avoir sélectionné, il suffit de placer ce cadre entier ici et de voir l'aperçu maintenant. OK, laisse-moi y retourner. Cliquez sur Relaxation, puis cliquez ici, et vous obtiendrez la page. Mais comme je vous l'ai dit, je ne veux pas double-cliquer ici. Je veux qu'il apparaisse tout seul. OK, pour ça, je vais venir ici. Comme vous pouvez le constater, j'ai sélectionné ce bouton ici. Accédez à l'option prototype. Je vais juste sélectionner celui-ci ici, vous pouvez voir que j' ai l'option de dissolution, mais au lieu de dissoudre, je choisirai ensuite l'option instantanée. Comme vous pouvez le voir, cela me mènera à la relaxation d'une page et voici la page de relaxation de deux pages. Je veux qu'il apparaisse ici, car j'ai déjà sélectionné l'option After Delay ici. Si je passe au prototype, je le connecterai ici et je cliquerai sur Oui. Maintenant, j'ai aussi cette option ici. OK, je peux juste en supprimer un d'ici. J'ai cette option ici. Comme vous pouvez le voir, j'ai un éclairage ici en ce moment. Je vais juste aller ici. Accédez à la page principale et cliquez dessus. Ici, vous pouvez voir que cela se présentera sous forme de diapositive. J'espère que vous avez également compris ce tutoriel. OK, comment pouvez-vous animer intelligemment ? Je vous ai montré l'option, comment vous pouvez réellement animer intelligemment votre truc Comment dupliquer votre cadre. Et tout cela dans ce tutoriel. Dans le prochain cours, nous verrons comment nous pouvons partager et comment vous pouvez participer. Vous pouvez le partager avec votre client ou avec les membres de votre équipe tout en travaillant en même temps dans une interface en direct. J'espère vous voir tous dans le prochain tutoriel. Réponds à tous tes désirs. Au revoir 9. Utilité de partager et d'ajouter des commentaires: Bonjour à tous et bienvenue dans un nouveau tutoriel sur Figma Nous voici donc dans notre chapitre numéro huit. Et le nom de notre chapitre est l'utilité de partager et d'ajouter des commentaires. Dans ce cours, nous allons donc apprendre comment nous pouvons essentiellement partager. Je sais que vous connaissez déjà les bases du partage, mais ici, ce cours abordera en détail le partage et expliquera en quoi il est très utile d' ajouter un commentaire aux autres membres de l'équipe pendant que vous travaillez sur un projet de vie. Comme vous pouvez travailler ensemble en même temps, vous pouvez voir ce que fait votre autre membre de l'équipe. Vous pouvez ajouter un commentaire. Invite-les. Dans ce cours, je vais vous montrer en détail comment partager et ajouter des commentaires. Ne perdons donc pas de temps et commençons par ce cours en particulier. Encore une fois, nous sommes sur la page d'accueil de Figma, comme vous pouvez le voir Et maintenant, comme je vous ai déjà dit, ce que nous allons apprendre. Je reviendrai sur ce projet en particulier ici. OK, et supposons maintenant que je veuille le partager avec mon client ou avec mes coéquipiers. OK, dans ce cas, je vous ai donné les bases de ce qui peut être fait. Ici, je vais simplement cliquer sur Partager. Supposons alors que je veuille mettre une adresse e-mail ici. Je vais juste indiquer une adresse e-mail. Je vais cliquer sur celui-ci. Ici, vous pouvez voir, comme j'ai sélectionné une adresse e-mail, que peuvent-ils en faire, peuvent-ils voir celle-ci ou ils peuvent également la modifier à partir d'ici ? OK, qui aura tous accès à ce truc en particulier ici ? D'accord. Ici, je ne peux dire qu'aux personnes invitées à ce dossier ce que je dois faire à partir d'ici. Sinon, je peux simplement cliquer ici. Toute personne ayant le lien. En gros, si ce fichier est secret, dans ce cas je ne peux que sélectionner celui-ci, comme seules les personnes invitées à ce fichier Mais s'il s'agit de ce fichier, je veux sélectionner ce lien en particulier et je veux copier celui-ci et l'envoyer à leur compte Word, Sap ou Messenger. Je peux le faire d'ici, d'accord. Et qu'ils puissent modifier ou uniquement consulter, supposons que je veuille simplement envoyer à mon client le lien où il ne peut que consulter. OK, dans ce cas, je peux cliquer sur cette option pour mes coéquipiers que je vais inviter. Je le ferai, ils peuvent également modifier. Je peux donc avoir ces deux choses ici. Je peux également ajouter un petit message pour eux, ceux que j'invite tous. Je vais donc écrire que vous devez m'aider à terminer ce projet à la fin de celui-ci. Alors je leur ai juste transmis un message. Avec qui je partage tout ce que je partage. Ça, je peux juste leur donner un message et je peux leur envoyer une invitation. OK, si j'ai trois ou quatre membres de l'équipe ici, dans ce cas, je peux choisir qui ne peut que voir, qui en est le propriétaire et qui peut modifier. OK, dans ce cas, je peux sélectionner ici, je peux simplement copier le lien. Comme vous pouvez le voir, ceci est copié dans mon presse-papiers car j'ai cette page ici, et j'ai déjà sélectionné un e-mail Je vais donc simplement leur envoyer une invitation. OK, à partir de là, je peux les inviter. Vous pouvez voir que je viens de les inviter ici. Si je souhaite publier travail que j'ai réalisé, je peux cliquer ici sur Publier et je peux simplement nommer celui-ci, en donner une description. Si je souhaite utiliser différents types de balises, je peux utiliser différents types de balises. Si je veux en faire un prototype, je peux en faire un prototype. Ou si je veux en faire un fichier, je peux aussi en faire un fichier. Quel aperçu ils auront. OK, si je choisis le prototype, je peux remplir l'écran, la taille réelle ou à 100 %. Je peux également télécharger une miniature pour ma classe de prototype, et voici quelques options avancées Qui est le créateur, la licence et l'adresse e-mail également ? OK, je ne le serai pas, donc je vais juste annuler ça. Venez ici et laissez-moi vous montrer comment vous pouvez réellement travailler. Beaucoup d'entre vous peuvent travailler dans le même onglet. Vous pouvez les modifier ou les concevoir en direct ensemble. OK, donc je vais juste y retourner. Je vais simplement accéder à cet e-mail. J'irai à. E-mail à partir d'ici, je vais juste prendre un autre e-mail ici. Vous pouvez voir que j' ai une invitation. Une fois que j'aurai cliqué sur celui-ci, je serai redirigé. D'accord ? Comme vous pouvez le voir, ce fichier en particulier fonctionne sur Figma Je vais juste fermer ça car je suis déjà là. Comme vous le voyez, j'ai aussi celui-ci. OK, je suis là pour vous montrer une meilleure façon de voir les gars. Ici, vous pouvez voir dans ce fichier, si je viens, minimiser cela. Donc, ici, vous pouvez voir, une fois que je me déplace dans cet écran, la souris ici, vous pouvez voir ce que fait l'éditeur. Et supposons que je veuille changer la couleur de tout cela ici. Ce que je peux faire, c'est que je viendrai ici, je viendrai modifier. Et je vais juste choisir une couleur. Et maintenant je veux coller cette couleur ici, d'accord. Ou je veux changer la couleur de la page entière en noir. Comme vous pouvez le voir, une fois que j'ai fait cette chose particulière ici sur cette page, sur mon autre page également, cela a changé car je lui ai également donné l'autorisation de modifier. Il peut le faire en même temps. C'est très intéressant. Grâce à cela, je peux également modifier tous les paramètres. Supposons que je le veuille dans 50 ans. Je vais cliquer sur Enter ici, vous pouvez voir que les deux pages se ressemblent. D'accord ? Parce que je suis capable de tout faire d'ici. OK, à partir de ce design, je sélectionne une case particulière ici. Supposons que je sélectionne cette case en particulier. Maintenant, je veux changer le trait. OK, je veux sélectionner le trait et je vais changer le trait de cette case ici, vous pouvez voir qu'il y a un changement dans ma case. Et je peux encore une fois venir ici et changer la couleur du trait pour quelque chose comme ça. OK, quelque chose de cette couleur. Gardez celui-ci ici. Et cliquez sur OK. Ici, vous pouvez voir que cela a changé dans les deux cas. Si je fais juste un zoom en plein écran, déplace celui-ci avec y, je devais le faire ici. Vous pouvez voir que je travaille ici aussi. Et je peux également voir ce que travaille mon partenaire. OK, supposons que je veuille ajouter un commentaire. OK, si j'ajoute un commentaire ici, supposons une partie ici. Ensuite, ce que je vais faire, est prendre ce cadre c'est prendre ce cadre et le mettre juste à côté de celui-ci. Avec mon outil manuel, je peux me déplacer et voir de quoi il s'agit. D'accord. Comme je suis ici dans le même ordinateur portable, les deux, c'est assez difficile de le faire. Mais j'espère que vous comprenez ce que j' essaie de vous faire comprendre, comme comment vous pouvez collaborer, comment vous pouvez également travailler. Supposons que je veuille ajouter un commentaire et que je veuille dire par exemple changer la forme de la boîte rectangle sans modifier en rectangle sans modifier le rayon des coins. À partir de là, je peux vraiment mentionner, je peux les mentionner si je les trouve juste ou je peux les mentionner en conséquence. OK, si je veux les mentionner, je peux les mentionner comme je veux le mentionner, je vais juste donner un emoji aussi Maintenant, si je soumets celui-ci ici, ils seront informés que j'ai envoyé un message. OK, voyons voir ça. Comme vous pouvez le voir ici, j'ai déjà mon message. De quel message s'agit-il ? Le message ou la zone de commentaire De plus, je serai averti que j' ai un message pour moi-même. D'accord. Ici. Une fois que j'aurai ouvert celui-ci et que j'aurai vu le message indiquant qu'il me dit de changer la forme de la boîte sans modifier le rayon des coins, je le ferai à partir de là. Et nous pouvons collaborer de cette manière. Si j'ai déjà résolu ce problème ou ce problème particulier qui m'a été signalé, je peux cliquer sur Résoudre. Mais là, je ne veux rien changer. Juste pour vous montrer l'utilisation de l'option de partage et de l'option de commentaire, par exemple à quel point c'est important lorsque nous travaillons en groupe. Supposons qu'ici j' aie autant de pages pour un cadre ou une page en particulier, je peux également diviser le travail pour eux. Supposons que je clique simplement sur ce cadre en particulier ici dans cette boîte. Maintenant, je veux partager cela et lui dire que vous travaillez sur ce fichier en particulier uniquement pour lequel je peux simplement cliquer. Comme vous pouvez le voir, cela est maintenant lié à la sélection, et je vais juste cocher cette case. À partir de là, je peux les inviter à nouveau et ils peuvent commencer à travailler là-dessus. Il s' agit d'une autre fonctionnalité proposée par Figma pour une meilleure option conviviale Maintenant, j'espère que vous avez compris comment partager votre fichier et ajouter un commentaire, et en quoi cela nous est très utile. J'espère vous voir tous dans le prochain tutoriel où nous apprendrons comment utiliser les colonnes et les notes dans votre fichier Figma J'espère vous voir tous dans le prochain tutoriel. Le prochain tutoriel est utile. J'espère que vous serez en mesure de faire votre propre application à la fin de ce tutoriel. Prends soin de tout le monde et à bientôt au prochain cours. 10. Colonnes et grilles: Bonjour à tous et bienvenue à tous dans un autre tutoriel sur Figma ici C'est le chapitre numéro neuf et nous allons en apprendre davantage sur les colonnes et les grilles. Dans ce cours, nous allons apprendre comment utiliser les colonnes et la grille. Comment changer la couleur, l'intensité, la gouttière de la colonne Je vais également vous dire ce que c'est. Et comment vous pouvez l'utiliser pour obtenir une taille ou vous faire une idée de la conception de votre page Web. Ne perdons pas de temps, commençons par ce tutoriel. Maintenant, je suis ici sur mon espace de travail, ou l'endroit où je vais essentiellement maintenant. Je vais d'abord créer un cadre. Ici, vous pouvez voir que pour créer un cadre, je vais créer des couches ou deux pages en gros, dont une pour le bureau. Pour cela, j'ai une taille de bureau standard, mais vous pouvez également faire des recherches et voir quelle est la taille de bureau la plus utilisée. Ordinateur de bureau pour lequel vous utilisez essentiellement ce fichier. Je vais juste prendre une taille particulière qui est de 1 440 en 2024. Je vais prendre ça. Et vous pouvez voir ici que j'ai ce cadre, que je viens de sélectionner dans le commissariat OK. J'en ai le texte ici. Maintenant, je vais créer, la même manière, un autre cadre mais dans une autre page. OK. Je vais juste ajouter une autre page. Je vais l'appeler, ****, cette première page. Je vais l'appeler page mobile. J'ai celui-ci ici. Dans ce cas également, je vais essayer de créer un cadre. Et je vais m'inspirer de mon précepte. Quel camp dois-je prendre ? Je vais le prendre pour le téléphone 14 pro max. Je vais cliquer sur celui-ci ici. Vous pouvez voir que j' ai mon cadre ici. OK. Ce que je veux faire ici, c'est mettre quelques colonnes. OK, ici, juste en dessous de la mise en page automatique, vous pouvez voir une option appelée Grille de mise en page. Ce que je vais faire, c'est cliquer sur ce côté positif ici. Comme vous pouvez le voir ici, vous pouvez voir que j'ai une grille, mais pour moi, je ne veux pas la quadriller, je veux avoir quelques colonnes ici. J'ai les paramètres de la grille des couches juste sur le côté gauche, et je vais cliquer ici. Au lieu de la grille, je vais choisir des colonnes à partir d'ici. Après avoir choisi la colonne ici, vous pouvez voir que le nombre est de 12. Mais pour moi, le décompte est de cinq. Mais je veux 12 12 parce que c'est la taille standard ou la taille de colonne, le nombre de colonnes pour la plupart des conceptions graphiques. Je veux juste opter pour celui par défaut. Si je veux changer certaines couleurs, je peux également changer ces couleurs à partir d'ici. D'accord, je peux en fait augmenter ou diminuer tout cela à partir d'ici si je veux changer la largeur et la hauteur. Et ici vous pouvez voir le caniveau. Gouttière, essentiellement l'espacement entre les deux colonnes. OK, ici, cette partie masculine, qui est en blanc, s' appelle la gouttière Si j'augmente la taille, supposons que si je mets 40 ici, vous pouvez voir que cela changera à partir d'ici. De même, si je le réduis simplement à dix, vous pouvez le voir changer. Il a diminué à partir d'ici. Je peux également choisir la forme que je souhaite donner à ma chronique. Est-ce que je le veux au centre gauche ou droit, ou est-ce que je veux qu'il soit étendu sur toute ma page C'est le meilleur format. De la même manière que je vais arriver ici sur la page mobile, j'arriverai à mon niveau de couche. Lorsque je vais cliquer sur cette option plus, sélectionnez les colonnes à partir d'ici. Ici aussi, j'en prendrai 12. Ce dix. Celui-ci, je vais juste le garder en forme. OK. À partir de là, je peux également modifier l'intensité de la couleur, si je prends. 50 ici, tu peux voir à quel point ma couleur devient profonde. Je veux juste que la couleur soit estompée. Et ça ferait du bien si je mettais également n'importe quelle sorte d'animation. Maintenant, ce que je vais faire, c'est créer plus de cadres. Supposons que pour cela, par exemple, je crée un cadre ici. J'ai un cadre ici. OK. J'en prendrai également un autre à partir d'ici. D'accord ? Je vais juste le remplir d'une couleur foncée. Laisse-moi prendre quelque chose de noir. OK, à partir d'ici. Celui-ci sera la colonne ici. Je vais créer un autre cadre. À partir de là, je vais prendre le corps principal. À partir de là, je vais juste déménager jusqu'ici. OK. J'ai aussi mon cadre ici. Je vais prendre un autre petit cadre ici. OK, sélectionnez-le. Je vais sélectionner celui-ci. Je vais dupliquer cette couche ici. Je vais juste l'emporter ici aussi. Ici aussi. Maintenant, j'ai ces quatre colonnes. Je peux aussi mettre des couleurs si je le souhaite. Supposons ici que je veuille mettre une couleur différente. Supposons que je le veuille noir foncé. Je veux aussi mettre celui-ci dans une couleur différente ici. Dans ce cas, je vais peut-être choisir quelque chose en vert. Je viendrai aussi. Une couleur différente. Je vais juste choisir ma couleur en conséquence. Du rouge ici, en bleu. Ici, il y a quelque chose dans «   ouais », c'est bon. Ce sera la mise en page de la même manière. Je vais passer à la page suivante. À partir de là, je vais prendre un cadre. À partir de là, je choisirai Swan. Ensuite, je vais créer une page principale ici. Ce sera le corps. Supposons que je souhaite créer une brochure ou un dépliant. Je peux commencer comme ça à partir d'ici. OK. Maintenant, je vais créer quatre autres boîtes à partir de maintenant. Créez une boîte d'ici à là avec mon ancienne. Je vais juste le copier. Quel ancien exemplaire ici ? J'ai quatre boîtes ici. Les quatre boîtes. Si j'essaie de sélectionner immédiatement, supposons que je veuille sélectionner uniquement ces cadres particuliers. À partir de là, je peux cliquer sur ceci, ceci et cela. Maintenant, je vais changer leur couleur comme je le souhaite. OK, supposons que je leur donne cette couleur, mais je vais changer l' opacité de la couleur ici Vous pouvez le voir, je peux aussi l'aligner comme je le souhaite. Maintenant, les quatre cadres sont alliés. Je vais aussi mettre une couleur ici, cette couche ici. Je vais mettre une autre couleur pour cette couche particulière ici. Vous pouvez voir que je l'ai créé en utilisant le vert. Vous aurez une connaissance de l'idée, qu'elle soit centrale ou non. J'ai créé cette couche à partir d' ici pour cette page mobile. De plus, j'ai une taille particulière que je préfère ou que je préfère. Je peux aussi faire le travail d' ici, d'ici. Encore une fois, laissez-moi vous montrer que si je viens ici, sélectionnez ce cadre ici. J'ai 12 colonnes. OK, maintenant ce que je veux faire, c'est ajouter des marges. D'accord ? Sur le côté Je souhaite également ajouter des marges. Et pourquoi ajoutons-nous des marges, c'est essentiellement lorsque nous créons une page Web ou une page d' application pour mobile, parfois nous ne voulons pas que l'essentiel ou le sujet principal soient mis de côté. OK, donc en gros, pour les mettre au milieu, nous avons une bonne idée en utilisant cette colonne pour savoir où placer cet élément en particulier. En gros, pour cela, nous utilisons tout cela et augmentons la marge à partir de là. OK, laisse-moi en prendre dix. Et si je clique sur OK, il n'y a pas beaucoup de différence à vous montrer. J'en prendrai environ 19 ici. Vous pouvez voir que ce sont les marges ici sur les côtés, le ****** blanc Il s'agit de la marge et de l'espace de travail principal du téléphone. Supposons que je travaille simplement ici sur cette partie en particulier et que je l'édite, ou que je fasse la conception ici dans cette partie en particulier. Après cela, si je pense que, d'accord, j'ai juste besoin de couper ces côtés, je peux les couper aussi. Il s'agit également d'une mesure de précaution qui est très utile et peut être très pratique dans ce domaine. Permettez-moi d'y revenir encore une fois, revenons à nos 12. Emmenez-le encore une fois ici. J'espère que vous l'avez compris. Je vous ai parlé du stretch et vous connaissez déjà la coloration. OK. Si je vais sur cette page de texte, j'ai maintenant 12 colonnes, de la même manière. Je vais simplement les sélectionner ici. Celui-ci. Maintenant, ce que je peux faire, c'est simplement cliquer dessus, changer celui-ci à dix. Cliquez sur Enter. Si vous me demandez quelle est la taille idéale pour une gouttière ? Il n'y a pas de taille ou de chiffre à mettre, mais pour cela, vous pouvez mettre entre 50 et 20. C'est assez standard, qui peut être utilisé ici. Si je vous montre la marge, accord, si je mets 60 ici, vous pouvez voir sur les côtés, j'ai les marges aussi, d'accord ? Je peux donc exclure mon travail de ce côté-ci et travailler seul sur ce point. Permettez-moi de revenir en arrière et de le faire, car j'en ai 12 ici. Si je veux le ramener à six ici, j'en ai six. OK. Je peux aussi travailler ici. Je dois juste m' assurer que j'aligne correctement toutes mes affaires. OK. Si je le mets juste de ce côté, celui-ci devrait être quelque part ici. Celui-ci est blanc ici sur le site. Je peux le dire. Ouais En gros, ça a l'air bien. C'est l'un des moyens par lesquels nous pouvons réellement aligner une page Web aussi bien. C'est ainsi que nous pouvons le faire. Permettez-moi de créer une autre page où je vous montrerai la grille « Je vais juste ça ». Je vais créer un cadre ou je vais simplement prendre un préréglage à partir d'ici. Permettez-moi de prendre un ordinateur de bureau ou, oui, un préréglage de bureau. Si je clique sur cette option de niveau de mise en page ici, vous pouvez voir ici que j' ai le niveau de mise en page. À partir de là, je peux réellement changer le chiffre standard de huit à dix, en gros. Chez les développeurs de téléphones Android et Apple, les développeurs d' applications utilisent généralement cette taille, d'accord ? Mais si vous travaillez pour une entreprise, vous vous efforcez de créer votre propre candidature. C'est essentiellement basé sur vos besoins, d'accord ? Comme vous le souhaitez, vous pouvez réellement consulter de nombreux concepteurs d' interface utilisateur et d'expérience utilisateur. Il n'est pas nécessaire d'être un codeur pour devenir un designer UX. Vous pouvez commencer par le niveau de base, l'apprendre, puis appliquer votre travail à un niveau avancé. Vous pouvez également travailler à un niveau supérieur où vous livrerez votre travail à votre client. Une fois que vous aurez fait du bon travail de conception, vous pourrez gagner de l'argent à partir d'ici. Comme vous pouvez le constater, je peux également changer de couleur. Ici, il en va de même pour la rose, comme je vous l'ai montré. Colonnes. Les rangées aussi, ça va se passer comme ça. Il en va de même pour les colonnes. Je ne vais pas vous expliquer en détail à ce sujet, mais ici, vous pouvez simplement travailler comme ça et mettre différentes formes en conséquence. D'accord ? Comme vous pouvez le voir, si je vais sur les côtés, je peux voir un feu rouge qui indique que si je vais à l'extérieur. D'accord, je dois également garder cela à l'esprit. Vous pouvez le voir ici. Je peux également créer différentes tailles. Si je fais juste un zoom arrière, je peux vous montrer mon travail ici. J'espère que vous avez compris cette classe sur les colonnes vertes et roses, car elle est assez similaire à l' utilisation de la colonne. J'espère que vous connaissez l'utilité des colonnes et du vert et la façon dont ils vous aident à créer du design. J'espère vous voir tous. Dans le prochain didacticiel nous verrons comment créer ou utiliser couleurs dans votre page Web ou dans votre design. Par exemple, quelles sont les différentes manières d'utiliser votre couleur ? Plus il y a de couleur ou plus l' équilibre s'améliore. Notre page Web y apparaîtra. Nous découvrirons l' inspiration, le compte-gouttes et comment vous pouvez également créer une palette de couleurs Ensuite, nous verrons également comment créer des dégradés. Enfin, je vais vous expliquer comment créer et utiliser des styles de couleurs. En particulier, application pour laquelle votre page Web sera si attrayante et j'espère vous voir tous dans le prochain cours. Prends soin de tout le monde. Au revoir 11. Inspiration couleur, palette de couleurs et outil de pipette: Bonjour à tous et bienvenue dans un autre tutoriel sur Figma Dans ce cours, nous allons apprendre d' où vous pouvez tous trouver l'inspiration en matière de couleurs. je vais vous montrer les sites Web sur lesquels vous pouvez obtenir des couleurs assorties. Ce qui doit être utilisé dans le développement de votre page Web ou de votre application. OK, après cela, je vais vous montrer comment créer votre propre palette de couleurs. Et aussi à propos de l'outil Eyedropper. Supposons que vous ayez une image ou n'importe quelle image et qu'à partir de là , vous souhaitiez retirer les couleurs utilisées dans votre page Web ou dans la conception de votre interface utilisateur. Je vais vous montrer comment vous pouvez prendre ces couleurs particulières à partir de là, et aussi quelques sites Web. Ne perdons pas de temps et commençons avec ce cours. Vous pouvez voir que je suis de nouveau sur ma page d'accueil. Dans le dernier cours, je vous ai montré comment utiliser la grille et la colonne ici J'utiliserai la même chose, juste ces couleurs. Je vais vous dire si vous voulez faire correspondre les couleurs dans votre travail ou dans votre projet d'où vous trouverez cette inspiration. Je vais également vous expliquer comment vous pouvez réellement l'utiliser Je le laisse tomber par exemple sur la façon dont nous pouvons extraire couleur d'un écran ou d'un objet en particulier et la déposer où vous le souhaitez. Nous allons découvrir tout cela dans ce cours. Je vais également vous montrer comment nous pouvons créer des modèles, comme je vous l'ai déjà dit. Commençons ici. J'ai la dernière diapositive du cours. Je vais juste déménager un peu en arrière. Maintenant, ce que je vais faire, c'est vous montrer quelques-uns des sites Web sur lesquels vous pouvez obtenir votre couleur. C'est le premier, qui est l'Autobl. L'autre, Color.com, ça va ? Ici, vous pouvez voir de nombreuses combinaisons de couleurs. Quelle que soit la couleur que vous aimez, vous pouvez simplement les prendre. Et vous pouvez également voir à partir d'ici que nous savons comment créer un code. Si je viens d'ici, je peux simplement taper ce code en particulier. Supposons que j'aime cette couleur vue d'ici. OK, celui-ci. OK, pour cela, je viens cliquer dessus et il a été copié Je vais juste accéder à ma page Fima, sélectionner. Je vais simplement coller Enter. Vous pouvez voir que j'ai cette couleur sur cette page. De même, si je choisis celui-ci ici, je souhaite changer de couleur. Je peux le faire de la même manière, mais pour l'instant je ne veux pas utiliser la couleur de fond. Ça a l'air plutôt moche. Je vais juste y retourner, me revoilà avec mon fond blanc ici. Voici quelques-uns des sites Web sur lesquels je peux choisir ces couleurs, et aussi le tout à partir d'ici. Supposons que je veuille tout coller. Je peux aussi prendre celui-ci pour me faire une bonne idée. Nous pouvons nous en servir. D'accord, vous pouvez voir ici certaines des couleurs populaires utilisées. Ici, nous pouvons sélectionner les couleurs pour notre projet. Ici, vous pouvez voir la couleur populaire du mois de l'année, ainsi que les couleurs populaires de tous les temps. OK, ici j'ai une collection de couleurs aléatoires. OK ? Il n'y a pas de palettes dans la collection car j'en ai ajouté, mais je peux les ajouter à partir d'ici. OK, si je veux juste une couleur ici, je peux télécharger cette image en particulier. Et ici, vous pouvez voir qu'il a été téléchargé. OK. Maintenant, je peux prendre cette couleur particulière à partir d'ici, et je peux simplement l' utiliser dans mon travail. OK. Le site Web suivant , Color.com, est une source d'inspiration de couleurs plus avancée pour D'accord, d'ici, nous pouvons voir la roue chromatique. Ici, j'ai toutes ces couleurs. Je peux le réajuster en fonction de mes besoins. Si j'aime quelque chose là-dedans, ils m'en montrent les dégradés, dans lesquels une couleur ira bien avec telle ou telle couleur Ici, je peux faire connaître ces choses en particulier , vous pouvez le voir. Et je peux également sélectionner les couleurs que je veux. Si je veux explorer les couleurs primaires, je peux également explorer les couleurs primaires. Supposons que je veuille le prendre ou l' ajouter à ma bibliothèque. Je peux juste cliquer ici. Celui-ci est ajouté à ma bibliothèque. Si je souhaite télécharger un Jpeg, je peux également télécharger le Jpeg à partir d'ici. Juste pour voir ces couleurs. Voici quelques-unes des choses. Pourquoi cette couleur persiste-t-elle ? Eh bien, ici, vous pouvez voir une image ici, d' accord, là , ils ont montré la combinaison de couleurs de ce à quoi elle ressemblera dans votre travail. Il en va de même ici, car vous pouvez voir l'image et comment elle correspond. Ensuite, si je passe également à l'option Tendances, vous pourrez voir quelles sont les tendances de toutes les couleurs en ce moment Pour le graphisme, ces couleurs sont très utiles pour la mode. Ces couleurs sont une illustration utile pour la conception UI UX. Quelles couleurs utilisent-ils essentiellement pour les objets architecturaux, pour la conception de jeux, pour les saveurs de la nature sauvage, nous pouvons les choisir ici. Ce n'est pas que si ces couleurs ne sont utilisées que pour la conception de l'interface utilisateur, cela ne signifie pas que je également choisir parmi cette couleur. Supposons que j'aime quelque chose de ces couleurs. Je peux aussi télécharger toutes ces couleurs. OK. Si je sauvegarde quelque chose dans ma bibliothèque, je peux le consulter d'ici. Celui-ci est un thème de couleur assez sympa dans ma bibliothèque. J'ai ces deux thèmes de couleurs. OK, maintenant si je reviens ici, si j'essaie de déplacer celui-ci, vous pouvez voir que j' aurai la couleur, laissez-moi la voir, dans un endroit moto chromatique Ici, vous pouvez voir la palette de couleurs. Si j'enregistre cette couleur, est ajoutée avec succès à ma bibliothèque ici. Vous pouvez voir, d'accord, si je veux voir ça, essayez-le, à quoi cela ressemblera. Complémentaire, scindé. Complémentaire. Le double split. Je n'aime pas cet avantage d'options, mais vous pouvez aussi l'utiliser. Ce sont des nuances de couleurs différentes. Voyons comment utiliser cette couleur ici. Supposons que je vienne ici, je veux placer une image d'ici. Comme vous pouvez déjà le voir, j'ai également une roue chromatique ici. Permettez-moi de mettre cette roue chromatique en haut, de l'apporter à l'intérieur. Voici donc la roue chromatique. Et supposons que j'ai mon travail particulier ici. OK, je vais choisir celui-ci, le garder dans un coin. Je garderai ici cette roue chromatique ainsi que mes différents thèmes. Juste à côté, je vais passer aux téléchargements, et je vais sélectionner ces trois options. Et je vais ouvrir ici. Vous pouvez voir que j'en ai une ici et une autre ici. OK. Et je vais diminuer la taille une par une ici. J'ai un ensemble de couleurs que je peux utiliser. Je vais juste faire un petit zoom arrière car c'est ici. J'ai aussi ces couleurs. Je l'ai aussi. Supposons que je veuille changer la couleur de mes boîtes ici, d'accord ? Et assurez-vous toujours d'avoir vos couleurs d'un côté, ne pas les mélanger lorsque vous travaillez sur votre projet final. OK, j'ai tout ça ici, d'accord ? Je veux animer ces choses d'ici. Ce que je vais faire, c'est que si je sélectionne celui-ci, je passerai à cette option de couleur ici. Je vais juste cliquer ici. Il s'agit de l'outil Eye Dropper. OK, supposons que je veuille changer la couleur à partir d'ici et que j'aie sélectionné l'outil Eyedropper Ici, vous pouvez voir une couleur particulière. J'ai cette boîte en particulier. Une fois que j'ai choisi une couleur à partir d'ici, cette couleur de boîte particulière sera modifiée. Permettez-moi de prendre cette couleur et de sélectionner cette case ici. Maintenant, je veux également sélectionner cette couleur de boîte. Pour cela, je vais double-cliquer ou simplement cliquer ici avec ma couleur ou l'outil compte-gouttes Je vais sélectionner cette couleur particulière pour les boîtes. Je vais choisir une couleur à partir d'ici. Pour cela, encore une fois, ceci, avant cela, je vais sélectionner cette case. Je laisse tomber son outil de sélection. Quelque chose dans le noir. Encore une fois, je baisse aussi. C'est ainsi que vous pouvez réellement mettre en place la couleur que vous souhaitez. Voici comment nous pouvons travailler ici sur cette page. C'est un moyen simple de compléter votre site Web et vous n'aurez pas peur d'avoir une bonne idée des couleurs que vous utilisez et de celles qui peuvent toutes être utilisées ici dans votre projet en particulier, d'accord ? Avant cela, nous devons seulement nous assurer que la page Web ressemblera à ce à quoi ressemblera mon application . En conséquence, vous pouvez mettre ces couleurs. Supposons que vous disposiez d'un ensemble de couleurs, mais que vous souhaitiez simplement les modifier. Dans ce cas, vous pouvez le voir ici, vous pouvez choisir l' opacité à partir d'ici De plus, j'ai cette option juste au-dessus. À partir de là, vous pouvez vérifier ces couleurs comme vous le souhaitez. Je vais juste y retourner. Je vais également vous montrer comment nous pouvons réellement créer une palette de couleurs. OK, supposons que j'ai les ensembles de couleurs ici. OK, ce que je vais faire, c'est prendre quelques boîtes rectangulaires. abord, je vais prendre cette petite boîte rectangulaire , copier celle-ci, copier celle-ci, copier celle-ci également. J'ai quatre boîtes ici avec mon compte-gouttes. Je vais venir ici, prendre cette couleur en particulier. J'en ai envie, j'ai cette couleur dans ma boîte maintenant. Je veux créer différentes nuances de cette couleur particulière. Oui, je pense que je vais juste supprimer celui-ci aussi, et celui-ci aussi. Maintenant, je vais copier cette boîte en particulier à partir d'ici. Comme vous pouvez le voir, une fois que j'ai dupliqué, j'ai également cette couleur ici De là, je vois la teinte que je veux. De même, je peux créer une autre boîte. Maintenant, cette couleur est copiée ici dans ma boîte de film. De plus, j'ai la même couleur. Maintenant, je peux choisir une autre teinte à partir d'ici. Encore une fois, je vais simplement continuer le processus de détermination du nombre de nuances de cette couleur particulière que vous souhaitez. Maintenant, je vais juste passer à une version plus légère ici. J'ai une palette de couleurs particulière, comme vous pouvez le constater. OK. De même si je souhaite créer une palette particulière pour ce brun. OK, c'est brun. Oui, mais quelque chose de brun clair et pas vraiment foncé. C'est quelque part au milieu. De la même manière, je vais prendre ma boîte rectangulaire. Je vais créer une boîte rectangulaire ici. Mettez n'importe quelle couleur en utilisant celle-ci. Ou supposons que je prenne quelque chose en bleu. OK, passons au vert. OK, j'ai ce vert ici. Maintenant, venez ici et copiez à nouveau la boîte. À partir de là, je peux choisir une autre teinte de ce vert. Copiez celui-ci et changez également la teinte à partir d'ici. OK, maintenant j'ai un peu plus clair, et je clique à nouveau sur Shift à A. OK, je vais venir ici et maintenant prendre une autre version plus claire de cette couleur. Ici, je vous ai montré comment créer une palette de couleurs. Si vous voulez enregistrer cette couleur particulière, vous pouvez l'enregistrer. Supposons que je veuille l'enregistrer ou le copier sur une autre page. Je vais accéder à cette page ici, je vais la coller ici. À partir de là, je peux réellement diminuer la taille de celui-ci. Mais là encore, vous pouvez voir que j'ai aussi les couleurs. J'espère que vous avez compris comment vous pouvez réellement inspirer des couleurs de tous les sites Web. Et comment créer une palette de couleurs. Et aussi l'utilisation d' collyre, deux types de gouttes ophtalmiques de couleur différente d'un objet secondaire à votre produit final ou à votre projet final. Comme je vous l'ai déjà dit, voici le color doo.com. C'est niveau assez avancé de roue chromatique, ou à partir duquel nous pouvons choisir la couleur Supposons que vous ayez une image particulière avec vous, accord, dans cette image, vous aimez le contraste des couleurs de cette image en particulier. Ce que vous pouvez simplement faire, c'est y apporter fichier ou cette image en particulier et le télécharger à partir d'ici. Ce qu'il fera, c'est qu'il extraira la couleur de cette image particulière et l' enregistrera sous forme de palette de couleurs pour vous. OK, si vous voulez utiliser cette couleur particulière, laissez-moi sélectionner un fichier ici. OK, vous pouvez voir ici que j' ai ce logo Fib. OK, je vais cliquer sur cette figure. Je vais ouvrir ça. Et ici, vous pouvez voir que j' ai cette palette de couleurs ici. Je peux vraiment enregistrer cette couleur. OK, vous voyez ici. Si je veux créer une nouvelle bibliothèque et l'enregistrer, je peux le faire. Mais si je veux le sauvegarder d'ici, je peux aussi le sauvegarder. OK, c'est la version colorée . Je vais enregistrer ça. Si je veux prendre celle qui est claire ici, vous pouvez voir à quoi elle ressemble, celle qui est sourde Il existe différentes manières de le sélectionner. Si vous souhaitez remplacer l'image, vous pouvez également remplacer l'image. Permettez-moi de revenir à celui-ci à partir de cette image. De plus, si vous souhaitez extraire le dégradé, qui est notre prochain cours, je vais vous montrer comment créer un dégradé et les différentes options correspondantes. OK ? De là, vous pouvez également voir les différents dégradés de celui-ci, d'accord ? Supposons que je vienne celui-ci et sélectionne le niveau de dégradé à partir d'ici. OK ? Si je veux copier celui-ci, je peux le copier d'ici. Comme vous pouvez le constater, j'ai également cette option. Si je souhaite enregistrer ce dégradé, je peux également enregistrer ce dégradé. À partir de là, vous pouvez voir le rapport de contraste entre cette couleur, la couleur du texte et la couleur d'arrière-plan qu'elle affiche. Si vous voulez utiliser tout cela, et la couleur d'arrière-plan qu'elle affiche cette couleur particulière s'adaptera cet arrière-plan en particulier. Si vous voulez utiliser tout cela, vous pouvez également essayer différentes couleurs à partir d'ici. C'est un outil très utile que nous pouvons réellement utiliser pour améliorer apparence de notre travail et avoir une meilleure idée du contraste des couleurs et de la coloration. OK, donc vous pouvez voir ici. Et cela m' a également permis de comprendre que, oui, cette combinaison de couleurs peut être utilisée entre un texte et un arrière-plan. C'est ainsi que nous pouvons réellement l'utiliser. Si je veux importer de la couleur, je vous ai déjà montré ce qu'il faut faire. Je veux sauver celui-ci. Je peux le sauvegarder d'ici. D'accord, d'où je peux voir, je vais aller dans mes bibliothèques. Dans ma bibliothèque, je trouverai les couleurs d'ici. Maintenant que j'ai sélectionné cette couleur particulière, celle-ci, je peux simplement télécharger cette version Jpeg, accéder à mon application Fib, et à partir de là, placer cette image en particulier. OK ? Si je clique dessus, j'ouvre ce fichier en particulier. Si je veux mettre ça en haut ici, je peux le mettre d'ici. Comme vous pouvez le voir, j' ai cette combinaison de couleurs. OK. Si je veux changer de taille, je peux également changer cette taille. OK. Comme vous pouvez le voir, je l'ai. OK, à partir d'ici. C'est une façon d'additionner les couleurs. Supposons que je prenne celui-ci ici. Contrôle, changement de couleur, déplace ma couleur. OK, je vais chercher les couleurs. Vous pouvez également utiliser ces thèmes particuliers à partir d'ici. Si je passe à l' option Explorer, encore une fois, à option Créer à partir d'ici. Je peux également prendre ces codes de couleurs à partir d'ici. Je peux simplement les copier-coller dans mon application de commentaires. J'espère que vous avez compris comment vous êtes censé utiliser les couleurs dans votre travail en particulier. J'espère vous voir tous au prochain cours. Dans cette leçon, nous avons en fait appris trois choses. premier est l'endroit où vous pouvez trouver votre inspiration en matière de couleurs. Je vous ai montré le site Web. Et la prochaine chose que nous avons apprise à propos du compte-gouttes, c' comment nous pouvons vous faire perdre la couleur D'accord, et nous avons également appris à créer votre propre palette de couleurs. Dans le prochain cours, nous verrons comment vous pouvez essentiellement travailler avec votre dégradé. Par exemple, comment vous pouvez créer votre propre dégradé et quelles sont les différentes manières de le créer. D'accord, en attendant, prenez soin de vous et j'espère vous voir tous dans le prochain tutoriel. 12. Projet de classe 1: Bonjour à tous. C'est le moment de créer votre propre palette de couleurs. Et voici le projet de classe numéro un où je vais vérifier votre palette de couleurs. voulez comprendre quel est votre sens du coloriage, c'est ce que nous allons faire. Passons au cours. Je vais vous montrer toutes les étapes à suivre. Et si vous êtes confus, mon tutoriel est déjà là. Vous pouvez consulter ces tutoriels. Voyons ce qu'il vous reste à faire. La première chose à faire est que vous devez créer une forme de rectangle à l'aide de l'outil de forme. Après cela, une fois que vous avez créé cette forme de rectangle particulière, vous pouvez choisir la couleur de votre choix dans la boîte de couleurs que je vous ai montrée. À partir de l'option de remplissage, vous pouvez obtenir votre boîte de couleur et la remplir avec n'importe quelle couleur. Ensuite, vous dupliquerez la boîte de couleur remplie et continuerez à modifier l' intensité de la couleur pour créer une palette Sinon, vous pouvez également choisir différentes couleurs qui se marient bien entre elles. Continuez ce processus en particulier. Et au minimum, vous devez prendre quatre couleurs, d'accord ? Ou quatre boîtes rectangulaires. C'est le minimum si vous pouvez faire plus, beaucoup plus heureux. Si vous pouvez le montrer. Ensuite, sélectionnez toutes ces couches et transformez-les en groupe. La dernière étape sera d'exporter ce groupe en particulier dans votre système et de le soumettre dans notre section projet que je puisse voir votre projet et essayer comprendre votre niveau de connaissance en matière de coloration. OK, je vais vous montrer comment vous pouvez le faire également. Ici, j'ai ma figma. Je vais prendre cette boîte rectangulaire et je vais en faire une ici. OK ? Comme vous pouvez le voir dans ce coin, après avoir créé une boîte, j'ai ma boîte de couleur. Il s'agit de l'étape numéro deux. Laissez-moi venir ici. OK, je vais choisir celui-ci, et je vais prendre quelque chose de noir. OK, maintenant, en cliquant sur Alt, je vais simplement dupliquer à nouveau cette couche. Ce que je vais faire, c'est venir ici, prendre à nouveau quelque chose de plus léger. Avec tout, je vais simplement dupliquer à nouveau cette boîte de couleur. Maintenant je vais venir ici. Je vais continuer ce même processus encore et encore. OK, je vais en créer cinq ensuite, celui-ci. Et choisissez cette couleur, ou je la prendrai ici. OK. J'ai donc créé ici mon propre panneau de couleurs. Ici, vous pouvez voir que j'ai quatre boîtes rectangulaires et ces choses sont individuelles. À partir de là, je vais simplement regrouper ces éléments et cliquer sur cette option d'exportation. À partir de là, vous pouvez voir, d'abord je vais juste venir ici et je vais sélectionner un groupe. D'accord, je peux nommer ce groupe en tant que palette de couleurs. Enregistrez ceci, passez maintenant à l'exportation. Maintenant, lorsque vous allez exporter ici, vous pouvez voir l'aperçu. OK, je veux prendre celui-ci au format Jpa. Je vais augmenter celui-ci. Je vais maintenant exporter cette palette de couleurs et l'enregistrer ici dans mes téléchargements. OK, maintenant j'ai déjà enregistré la palette. Permettez-moi d'aller ici et de voir, où est ma palette de couleurs ? Maintenant, vous pouvez voir que j'ai la palette de couleurs ici au format J Pac. C'est tout ce que vous devez faire ici dans ce cours. Dans le cadre de ce projet de classe, j'espère que vous m' enverrez votre travail. Je suis vraiment intéressée d'avoir une idée ou de connaître vos connaissances sur coloriage et la création de vos propres palettes de couleurs. J'espère voir du travail. Alors prenez soin de tout le monde. 13. Les gradients: Bonjour à tous, et bienvenue à tous pour un autre tutoriel dans Figma Nous en sommes maintenant au chapitre numéro 11, et nous allons en apprendre davantage sur les dégradés. Voilà comment nous pouvons jouer avec toutes vos couleurs, comment vous pouvez créer vos propres dégradés. Et aussi, je vais vous montrer un site Web à partir duquel vous pouvez obtenir les dégradés Did et à partir de là, vous pouvez copier ces codes couleur et les coller dans votre application Ne perdons pas de temps ici. Comme vous pouvez tous le constater, je suis maintenant dans l'un des espaces de travail. Je vais vous montrer comment vous pouvez commencer par créer des dégradés. Je vais juste passer en haut. Je vais juste créer un cadre. Je vais prendre un téléphone de taille 14, garder celui-ci de ce côté et dupliquer cette couche. Oui, maintenant j'ai quatre des cadres ici, comme vous pouvez tous le voir ici, car j'ai créé quatre pages maintenant. Maintenant, je vais utiliser cet outil rectangulaire à partir d'ici et créer une boîte rectangulaire que je vais utiliser pour créer un dégradé. OK. Avant cela, je veux vous montrer le site Web d' où vous pouvez obtenir n'importe quel type de dégradé que vous pouvez utiliser dans votre travail. OK, c'est le site web, le gradient.com À partir de là, en gros, vous obtenez différents types de dégradés et comment vous pouvez Vous pouvez simplement venir ici, cliquer sur cette couleur particulière, vous pouvez simplement copier-coller ce code particulier dans votre application. Ou si vous souhaitez l'ajouter à votre bibliothèque, vous pouvez l'ajouter en cliquant simplement ici. OK, j'ai celui-ci, mais je vais vous montrer comment vous pouvez créer le vôtre. Je vais à nouveau passer à mon application pour le visage. Maintenant que j'ai celui-ci et que celui-ci est sélectionné, je vais venir ici dans l'option de remplissage et sous Phil, vous pouvez voir qu'il y a une option de dégradé. Et une fois que j'ai cliqué sur cette option de dégradé ici, vous pouvez voir que j'en ai une linéaire, une option radiale, d'accord ? Et Angulo, une fois que j'aurai mis la couleur, vous serez en mesure de voir quelle est la différence Et celui-ci est en forme de diamant, d'accord ? Supposons que j'utilise principalement le linéaire au niveau radial. D'accord ? Permettez-moi de prendre cette première couleur à partir de là. Laisse-moi enlever le bleu. OK, à partir de maintenant, laissez-moi essayer de prendre tout ce qui est en rose, comme vous pouvez le voir ici. Et la façon dont je peux ajuster le positionnement, c'est si je le prends d'ici, il suffit de déplacer celui-ci ici. Vous pouvez voir que je peux réellement maintenir, ou que je peux vraiment mettre là où sera la couleur. C'est une façon de créer notre propre dégradé ici. On peut en fait mettre plus de deux couleurs à partir d'ici. OK, si je clique ici, maintenant j'ai aussi un point. OK, supposons que je veuille en ajouter un ici. Maintenant, je vais peut-être choisir une autre couleur. Je peux choisir comme ça. Celui-ci, je vais aller un peu plus loin. Vous pouvez voir que j' ai mon dégradé. Vous pouvez l'ajouter autant que vous le souhaitez. D'accord, vous pouvez en ajouter d'autres à partir d'ici. Supposons que maintenant j'ai celui-ci. Je vais en changer la couleur. Je vais déplacer celui-ci en haut. Je vais garder celui-ci au milieu. Maintenant, je peux changer la couleur d'ici. Comme vous pouvez le constater , une fois que je viendrai ici, je prendrai peut-être quelque chose de similaire à partir d'ici. Si je veux l'assombrir, je peux l'assombrir. Si je veux juste le rendre léger, je peux le rendre léger. Tout dépend de moi. Permettez-moi d'être un peu plus léger. Je vais le prendre de ce côté. Oui, mon dégradé est prêt maintenant. Comme vous pouvez le voir ici, j'ai un dégradé. Si je clique sur Enter, vous pouvez voir que mon dégradé est prêt. Si je veux copier celui-ci, je vais simplement le copier. Premièrement, déplacez-le sur une autre page, collez celle-ci ici. Vous pouvez voir que j'ai la taille du dégradé ici. Ainsi, nous pouvons créer notre propre dégradé. Permettez-moi également de vous montrer les trois autres options ici. Je vais juste revenir à la même page. Et je vais venir ici, créer une autre boîte rectangulaire à partir d'ici. Ou laissez-moi simplement prendre une autre forme. OK, laisse-moi démonter le cercle. OK, je vais créer un cercle à partir d'ici. Comme vous pouvez le voir, j' ai mon entourage ici. Oui, je vais juste garder celui-ci au milieu. Maintenant, ce que je vais faire, c'est entrer dans cette option de champ, aller dans ma bibliothèque ici, opter pour la radiale. Maintenant, je vais sélectionner une autre couleur. OK, laisse-moi prendre le rouge ici. Je voudrais mettre un peu de couleur jaunâtre ici. D'accord, à partir de là, j'ai sélectionné celui-ci. Passons maintenant au jaune. Et ici, vous pouvez voir, juste en dehors du rouge, que j'ai ma décoloration jaunâtre. Je vais juste l'amener quelque part au milieu. Oui, je vais juste l' apporter ici. Et je peux également ajouter différentes couleurs. si je clique simplement ici et que je veux peut-être un vert, je peux sélectionner le vert à partir d'ici. OK, je peux sélectionner le vert quelque part ici. Oui, je le peux. Maintenant, si je veux m'étendre, je peux aussi m'étendre. OK. Je peux prendre cette couleur verte à partir d'ici. Je vais faire en sorte qu'il fasse nuit. Je vais également augmenter celui-ci. OK, tiens, je vais garder ça ici. Oui, vous pouvez aussi créer du radial comme vous le souhaitez ici. Vous pouvez voir si j' augmente également la taille à partir d'ici. C'est ainsi que vous pouvez jouer avec toutes les couleurs d'ici. OK, c'est une façon de jouer. De même, je peux également ajouter une couleur différente. Augmentez également la taille. Peut-être que je veux aussi augmenter la taille à partir d'ici. D'accord, si je veux créer un arc, je peux aussi créer un arc comme celui-ci si je veux ici. Je viens de créer un dégradé radial. Comme vous pouvez le constater, j'espère que vous comprenez ce que j'essaie de vous montrer ici. Maintenant, laissez-moi prendre un polygone ici, laissez-moi créer un polygone au-dessus de celui-ci Laissez-moi l'amener au centre. Ensuite, ce que je vais faire, c'est sélectionner ceci. Maintenant, je vais vous parler de la version angulaire, d'accord ? Je vais d'abord choisir la couleur à partir d'ici. Maintenant, je vais sélectionner peut-être cette couleur en fait. Où est-ce que je veux que cette couleur soit ? Comme vous pouvez le voir, j'ai sélectionné cette couleur ici. Je vais peut-être ajouter une autre case dans ce coin. Je vais augmenter celui-ci. Je peux choisir la couleur que je veux. Ou supposons que j'ai déjà une couleur particulière, que je veux déposer ici. En utilisant cette couleur, je peux venir ici, je peux choisir cette couleur. Mon compte-gouttes ici, vous pouvez voir qu'il y a un changement D'accord ? De même, je peux ajouter une couleur différente ici. OK, permettez-moi d'ajouter cette couleur maintenant. Permettez-moi également d'éclaircir celui-ci. Peut-être que la combinaison de couleurs n' est pas géniale, mais pour vous montrer ça, quelle est la différence entre ça à partir d'ici ? J'ai aussi certaines options comme X et RGBs si je crée une autre boîte ici ou si je crée une autre forme OK, laissez-moi prendre une boîte rectangulaire uniquement, je vais créer à partir d'ici. Choisissez celui-ci. Permettez-moi de le déplacer un peu avec mon outil à main pour que vous puissiez le voir correctement. D'accord ? Je l'ai maintenant. Je vais juste déposer celui-ci ici. D'accord ? Je vais prendre le modèle angulaire ici. Vous pouvez voir comment nous pouvons essentiellement travailler avec cela. D'accord ? À partir d'ici. Ou changez la couleur ici, vous pouvez voir. Je peux ajouter une autre couleur ici. Supposons que je veuille prendre un vert ici, vous pouvez voir une coloration verdâtre. OK, permettez-moi de zoomer sur cette case en particulier. Ici, vous pouvez voir que si j' ajoute une couleur différente ici, je peux sélectionner une couleur différente à ma guise. OK, laissez-moi prendre ça à cette fin, couleur verte. C'est ainsi que nous pouvons réellement travailler sur cette application. D'accord, de même, vous pouvez posséder le gradient. Une fois que vous avez terminé, vous pouvez simplement cliquer sur Enter une fois que vous êtes prêt avec votre dégradé. Je vous ai également montré comment vous pouvez essentiellement passer à une autre couche. Si je veux copier, je vais passer à cette couche. Je vais juste coller celui-ci ici. Comme vous pouvez le voir, je veux qu'il soit de la même taille que celui-ci. Pour cela, je vais cliquer ici, Scale. Je veux en monter un. Maintenant, toujours avec l'outil de déplacement, je vais le sélectionner, augmenter la taille. Comme ça. Oui, maintenant j'ai presque la même taille, mais je peux aussi voir la largeur et la hauteur d'ici, 270-93-2022 Ouais. Maintenant, les deux ont la même taille. Comme vous pouvez le constater, je rejoins les deux. Ce sont les deux dégradés que j'ai créés ici. Encore une fois, rendez-vous sur cette page en particulier. Permettez-moi de vous montrer la dernière option à partir de là, qui est la forme du diamant. OK, voici à quoi ressemblera la forme du diamant. Mais Angular n'était que très bien. Permettez-moi de prendre une autre forme à partir d'ici. Laisse-moi prendre une étoile. Laissez-moi créer une étoile ici. Gardez-le au milieu. Maintenant, mettez une étoile de sélection, choisissez le champ. Laisse-moi juste prendre un peu de couleur brune. Sur ce point, permettez-moi de prendre une couleur jaune. OK. Oui, couleur jaune d'ici. Et de la même façon, je peux également ajouter une couleur différente à partir d' ici si je le souhaite. D'accord ? Juste au milieu, si je veux ajouter un peu de rouge ou si cela prend simplement toute la couleur, voici comment nous pouvons ajuster la coloration. Vous pouvez voir qu'il s'estompe car il aura la forme d'un diamant OK. Ici, si j'augmente simplement la taille de celle-ci, la taille de l'étoile, si je veux la redimensionner, je peux aussi la redimensionner comme je le souhaite. Permettez-moi de réduire cela. Oui, maintenant celui-ci est au milieu. Sélectionnez cette option à nouveau ici. Sélection de l' outil de déplacement, diamant linéaire. Et cliquez ici, vous pouvez voir à quoi ça ressemble réellement. OK, ici vous pouvez voir un petit point. En utilisant cela, je peux simplement étendre la ligne. Ou je peux aussi mettre celui-ci ici. Ici, dans cette diapositive, je souhaite ajouter une couleur. OK, laissez-moi prendre celui-ci, et ici vous pouvez voir la couleur de mon étoile. Cliquez sur Enter, et vous avez ici votre dégradé d'étoiles. OK, je veux aussi le sélectionner ou le copier sur ma page de bureau ici, Coller. Oui, j'ai aussi ce dégradé. Diminuez la taille. Oui, j'ai aussi ce dégradé. J'espère que vous avez compris comment créer votre propre dégradé et différents types de dégradés. Et je vous ai également montré comment vous pouvez jouer avec votre style dégradé. Ce sont les quatre options que vous pouvez utiliser n'importe laquelle, mais pour moi, j'utilise la linéaire et la radiale, principalement à partir d'ici. Je peux aussi me demander à quel point je veux, quel point je veux ces couleurs profondes et douces. OK. Je peux aussi choisir à partir d'ici. OK. J'espère donc que ce cours était clair. Dans le prochain cours, je vous expliquerai comment vous pouvez créer vos propres styles de couleurs ou les créer et les utiliser dans votre fichier. OK, je vais vous le montrer, alors restez à l'affût de ce cours et j'espère vous voir tous dans le prochain tutoriel. Nous allons maintenant passer à notre dernière leçon de coloriage. Prenez soin de tout le monde et à bientôt. 14. Styles de couleur: Bonjour à tous, et bienvenue à tous pour un autre tutoriel dans Figma Nous en sommes maintenant au chapitre 12 et nous allons découvrir les styles de couleurs, exemple comment créer différents styles de couleurs, enregistrer ceux que vous pouvez utiliser dans votre projet. OK, nous allons donc voir comment vous pouvez tous le faire et nommer ces styles particuliers que vous ne confondez pas. Je vais vous montrer comment enregistrer votre couleur, comment vous pouvez l'appliquer, et une fois que vous pourrez modifier les couleurs enregistrées, je vous montrerai comment vous pouvez les modifier et une fois que vous aurez changé couleur particulière dans le panneau d'édition, comment cela changera tous les endroits où vous avez appliqué cette couleur. Nous allons examiner toutes ces choses ici dans ce cours en particulier. Ne gaspillons pas le type L. Commençons par cette classe particulière dès maintenant. Encore une fois, dans le projet précédent ou sur la page ici, d'accord, je vais vous montrer comment créer une couleur et comment enregistrer ce style particulier, qu'il vous sera facile d'utiliser même couleur dans le prochain projet également. Créons un autre cadre ici. OK, je vais venir ici dans l'option cadre, je vais prendre la même option que celle que j'ai déjà ici. OK ? Je vais le garder quelque part ici avec mon outil à main. Je vais juste déplacer celui-ci pour que vous puissiez le voir correctement ici. OK. Maintenant, je vais passer à l'outil de forme, créer une boîte rectangulaire ici. Un autre ici. Je vais copier celui-ci, le mettre ici, maintenir l'espacement entre et Oui, maintenant celui-ci est au centre. Maintenant, ce que je vais faire, c'est que j' ai ce type de couleurs ici, comme vous pouvez le voir. Permettez-moi également d'apporter ce dossier quelque part juste à côté d'ici. Ce sont mes styles de couleurs, que j'ai, qui me permettent de sauvegarder ces couleurs et de les appliquer où je veux. Je vais vous montrer qu'une fois que j'aurai changé de couleur à partir d'ici, si je veux la modifier après avoir enregistrée et appliqué ce style, cette couleur particulière sera modifiée dans toutes mes pages où j'ai appliqué tout ce que j'ai appliqué. Permettez-moi de vous montrer un exemple à quel point je suis d'accord, j'ai cette couleur particulière ici. Comme vous pouvez le voir dans le champ, j'ai déjà cette couleur, accord, ou ce dégradé. Ce que je vais faire, c'est cliquer sur ces quatre points dans l'option de champ. Viens ici, clique sur cette nouvelle variable, et tu peux voir que j' ai un style ici, ça me dit de nommer cette couleur en particulier, d'accord ? Je vais juste enregistrer celui-ci en tant que dégradé, d'accord ? Et si je veux ajouter n'importe quel type de description, je peux également en ajouter. Cela se fait comme si beaucoup d'entre nous travaillaient dans le même onglet, je veux qu'ils sachent ou qu'ils sachent que pour quel élément ou quelle partie du design, je veux utiliser cette couleur. Supposons que je veuille utiliser cette couleur pour les boutons. Onglets, je peux juste cliquer ici, je peux cliquer ici. Et ici, vous pouvez voir que j' ai le dégradé de couleur ici. OK. Alors maintenant, j'ai ce dégradé de couleur ici, et maintenant il est sélectionné. Ce que je veux faire, c'est appliquer également cette couleur dans toutes ces cases. OK, je vais juste cliquer ici, venir ici, passer à cette option Feel, je dois venir ici. Et ici, vous pouvez voir cette couleur particulière est enregistrée ici. OK ? Maintenant, si je clique dessus ici, vous pouvez voir pourquoi cette couleur est collée ici De même, je peux aussi le faire avec toutes ces couleurs. Dans la bibliothèque, je n'ai qu' une seule couleur et je peux sélectionner cette couleur comme couleur principale et créer un style. Alors prends cette couleur. Je vais enregistrer celle-ci comme couleur secondaire. Je vais encore une fois la nommer comme deuxième couleur. Maintenant, si j'en viens à cette case en particulier, choisis celle-ci ou celle-ci. Maintenant, je vais mettre ma couleur primaire ici. Je vais mettre la couleur secondaire ici. Maintenant je l'ai. Viens ici et mets la couleur primaire ici. Je vais mettre la couleur secondaire. Je vais aussi le faire ici, permettez-moi de garder celui-ci comme dégradé. Cliquez sur Enter. Revenons à cette tarte, encore une fois, je fais la même erreur encore et encore. Ici, je vais mettre la couleur secondaire, d'accord ? Maintenant que j'ai sélectionné ces couleurs particulières ici, comme vous pouvez le voir, elles sont remplies de ces trois couleurs d'ici. Maintenant, si je veux changer cette couleur, supposons que j'ai celle-ci. Je peux vraiment le renommer. Et voici l'option d'édition des couleurs. OK ? De là, je peux modifier la couleur. Maintenant, si je viens ici et que je change cette couleur là, vous pouvez voir qu' elle change partout où j'ai appliqué cette couleur en particulier. Maintenant, je peux cliquer ici. Comme vous pouvez le constater, il est en train d'être modifié. Il en va de même pour celui-ci. Dans l'option couleur secondaire, je souhaite changer toutes les couleurs. Je veux changer l'ombrage ici, vous pouvez voir que je peux le changer à partir d'ici Ici, vous pouvez voir où j'ai appliqué ces couleurs qui peuvent changer par rapport à la couleur primaire. Je veux aussi changer cette couleur. Je vais juste le prendre en rose ou simplement ajouter un dégradé ou choisir cette couleur. Oui, j'espère que vous avez compris comment nous pouvons réellement utiliser ces couleurs et enregistrer vos styles de couleurs, comment nous pouvons essentiellement travailler avec tout cela. Une fois que j'ai changé ce point ici, vous pouvez également voir ici sur cette case en particulier, vous pouvez voir que la couleur a changé parce que c'est aussi une boîte rectangulaire et j'ai en fait pris cette couleur à partir d'ici. Vous pouvez maintenant voir que la couleur principale est celle-ci, secondaire est celle-ci et le dégradé est celle-ci. OK ? De même, nous pouvons ajouter différents types de couleurs. Nommez-les et décrivez le système. Vous pouvez également l'utiliser sur d'autres pages. Supposons que je sois maintenant sur cette page, mais que j'ai toujours mes styles de couleurs particuliers ici. Comme vous pouvez le voir, j'ai aussi les styles de couleurs ici. Maintenant, également manuellement, vous pouvez venir ici pour créer du style. OK, laissez-moi créer un style de couleur, sinon j'ai cette option. Je vais directement voir comment créer un nouveau style de couleur. Je peux sélectionner la couleur ici. Supposons que je veuille enregistrer ceci. Je veux le nommer couleur d'arrière-plan. Je peux également enregistrer ce style particulier à partir d'ici. Je peux également changer la couleur de fond à partir d'ici. Si je viens, je peux juste sélectionner celui-ci. Cliquez sur Enter. Supposons que je sois là, sélectionnez cette couleur. Cela me permet également de changer la couleur de mon arrière-plan, mais je ne veux pas utiliser de couleur d'arrière-plan pour le moment, car elle ne sera pas belle sur cette page. J'espère que vous avez compris ce cours sur la façon dont vous pouvez enregistrer votre style et comment créer votre propre couleur. Changez-le au même endroit et il sera modifié dans l'espoir que ce cours soit clair. Maintenant, vous pouvez l'appliquer dans votre fichier particulier ou dans page Web de votre application où vous le souhaitez. J'espère vous voir tous dans le prochain cours où nous en apprendrons davantage sur les images, notamment sur le masquage et sur la façon dont nous pouvons recadrer nos images Et aussi comment nous pouvons essentiellement mettre une image ici dans notre espace de travail. J'espère donc vous voir tous dans le prochain tutoriel. D'ici là, prends soin de toi et au revoir. 15. Comment utiliser des images dans Figma: Bonjour à tous, et bienvenue à tous pour un nouveau tutoriel sur Figma Voici donc le chapitre numéro 30, et je vais vous montrer comment utiliser les images dans cette application particulière, exemple comment vous pouvez importer, quelles sont les options et quelles sont les méthodes que nous pouvons faire. Je vais également vous montrer comment vous pouvez effectuer des retouches de base sur votre image. Je vais vous le montrer, les gars. Nous apprendrons également si j'ai une forme particulière ou un endroit particulier dans ma page déjà terminée. Alors, au lieu de la couleur, comment puis-je remplir cet endroit avec une image ? Je vais donc vous montrer tout cela ici dans ce cours en particulier. Commençons donc. Alors maintenant, comme vous pouvez le voir, je suis de retour sur la page où j'ai un cadre ici. Maintenant, je vais cliquer sur Control plus Shift plus. OK. Et après avoir cliqué dessus, vous pouvez voir ici qu'il s'agit la touche de raccourci qui vous permet de faire apparaître votre image sur l'écran où vous pouvez télécharger ou importer une image dans votre œuvre particulière Donc, ce que je vais faire, c'est cliquer sur celui-ci, et je vais l'ouvrir à partir d'ici. Et comme vous pouvez le voir, j' ai mon image sur ma souris. Ici, je peux choisir la taille de l'image. À partir de là, je peux choisir cette taille particulière, façon dont je veux placer ma page. Donc, comme vous pouvez le voir, j'ai mis par page ici. Et il existe un autre moyen contrôler le changement de vitesse K. Et à partir de là, je peux simplement faire glisser cet objet en particulier et le déposer. Mais ici, si je fais cela, la taille de l'image je ne peux pas maintenir la taille de l'image à partir d'ici. Mais si je veux conserver la taille de l'image, je vais simplement y retourner. C'est ainsi que nous pouvons mettre une image. Nous pouvons également cliquer ici dans la forme vers l'option, et de la forme vers l'option, nous passerons au placement de l'image et de la vidéo. Et une fois que je suis arrivé ici, si je veux sélectionner une image, je peux le faire. Et supposons que je veuille importer plus d'une image en même temps, je vais donc sélectionner comme ceci. Ici, vous pouvez voir, je vais juste m'en tenir à ce point. Maintenant, je peux l'ouvrir, et vous pouvez voir ici que j'ai 11 images sur ma souris. Donc, ce que je vais faire, c'est créer la taille que je veux. Je vais donc en mettre un autre ici. Donc, comme ça, je peux réellement changer ou mettre autant d' images différentes en même temps. Et si je clique sur Control Shift, vous pourrez voir ici qu'il augmentera proportionnellement OK ? Mais je n'en ai pas besoin. Je vais prendre ceci, ceci et ceci ici. OK, c'est fait. Je vais donc vous montrer toute la page. Et ici, vous pouvez voir que j'ai mes images ici. Et comme il s'agit d'un si grand nombre de fichiers, je vais simplement les mettre dans le cadre, sélectionner, et je vais choisir la sélection du cadre. Alors maintenant, vous pouvez voir que c' est sous un cadre, d'accord ? C'est donc un autre cadre. Je vais juste le garder de côté. Il s'agit donc d'une méthode de raccourci ou de la meilleure façon placer votre image. Ou si vous avez une vidéo, vous pouvez également importer une vidéo. Alors laisse-moi revenir ici. Je vais donc passer un peu à cette page en particulier. Cliquez sur celui-ci. Et apportez-le ici dans le lit. OK. Alors maintenant je l'ai. Et ici, ce que nous pouvons faire en gros , c'est que si je sélectionne cette couche en particulier, supposons que je veuille sélectionner cette couche entière, ces deux couches ici. Il s'agit d'un cadre. Laissez-moi voir ce que tous les autres ont fait. OK. J'ai ce cadre Donc oui, maintenant, je vais simplement retirer cette image en particulier d'ici, et je vais mettre ma propre image. Donc, pour cela, une fois que j'ai sélectionné cette image, je vais accéder à cette option de remplissage, cliquer sur celle-ci. Et ici vous pouvez voir que j' ai l'option image. Vous pouvez donc voir ici que j'ai sélectionné cette option image. Et maintenant, si je reviens en arrière ou que je clique sur Entrée. Maintenant j'ai celui-ci. Maintenant, si je passe à cette option de remplissage. Ici, vous pouvez voir que je peux choisir une image. Supposons que je veuille y mettre cette image. Je vais juste cliquer sur Ouvrir. Ici, vous pouvez voir que j'ai l'image juste en dessous. J'ai mon image ici. Comme vous pouvez le voir, je l'ai. Et là encore, je vais essayer de créer une forme. Supposons que je prenne un cercle, fasse un cercle ici, clique sur cette option de remplissage, image, qui est une image d'ici. Et peut-être que je vais prendre celui-ci, je vais ouvrir celui-ci. Ici, vous pouvez voir que j'ai également mon image ici au centre. Voici donc comment vous pouvez également placer votre image dans une icône particulière. Je vais donc simplement supprimer celui-ci. Voici donc comment vous pouvez le faire. Et maintenant, encore une fois, j'en viens à cette option de remplissage ici. Donc, comme j'ai une image ici, je vais choisir. Comme j' ai celle-ci, je peux également en modifier l'exposition, ainsi je peux également en modifier que le contraste. Comme je le souhaite, je peux vraiment le faire. Ce n'est pas Photoshop, mais nous pouvons effectuer certaines des modifications de base de votre image à partir d'ici. Si je veux augmenter la température, je peux le faire, et je vais juste profiter un peu de ce OK. Vous pouvez voir ou. Les reflets et les ombres. C'est très bien. J'en suis content. Et ici, je peux aussi faire pivoter l'image 90 degrés à partir d'ici, comme vous pouvez le voir, je peux la faire pivoter, donc je vais la garder comme ça. Maintenant, j'espère que vous avez compris ce cours la façon dont vous pouvez réellement créer une image comme vous le souhaitez. Ici, vous pouvez également animer le texte ou si vous voulez placer une zone de texte quelque part ici, exemple si vous voulez mettre et écrire par exemple si vous voulez mettre et écrire comme le propose Figma Et je vais juste cliquer à l'extérieur. Prends ça en haut. Oui. Je peux le faire comme ça. Et ici, vous pouvez voir que je peux simplement sélectionner cette case. Et je peux également modifier la taille de la boîte. Vous savez maintenant comment jouer avec cette application particulière dans l'option images. OK ? Dans le prochain cours, nous verrons comment masquer une image et comment vous pouvez également la cm en particulier. J'espère donc vous voir tous dans le prochain tutoriel et prenez soin de vous et au revoir. 16. Plugins de masquage, de recadrage et d'image: Bonjour à tous et bienvenue à tous pour un autre tutoriel dans Figma Nous en sommes maintenant au chapitre numéro 14 et nous allons apprendre comment utiliser le masquage, le recadrage et quelques plugins d'image. Je vais vous montrer où vous pouvez obtenir des images gratuites à des fins commerciales ou simplement pour travailler dessus, pour vous entraîner à obtenir images gratuites de haute qualité. Je vais vous le montrer, les gars. Je vais vous montrer comment recadrer une image de différentes manières et comment nous pouvons effectuer le masquage de base dans cette application particulière Commençons avec ce cours maintenant que je suis sur ma page. La première chose que je vais faire est d'exporter l'image comme je l'ai fait dans le dernier cours à partir d'ici. Je peux aussi le faire ici. Vous pouvez le voir à partir de cette option rectangulaire, je peux venir cliquer ici et je choisirai une image, d'accord ? En gros, pour recadrer l'image, nous pouvons simplement le faire à partir d'ici si vous voulez que celle-ci augmente proportionnellement Dans ce cas, je peux simplement cliquer sur Control Shift et c' est ainsi que nous pouvons le faire, et je peux également revenir ici. Prenez cette même image et supposons maintenant que j'augmente la taille de cette image. C'est une façon de recadrer, en gros. Maintenant, cette quantité est suffisante si vous voulez maintenant recadrer proportionnellement Dans ce cas, je vais cliquer sur Control, ou sur Shift ici. Vous pouvez voir que je peux déplacer l'image proportionnellement, d'accord ? Je vais sélectionner celui-ci ici. Maintenant, je peux aussi le recadrer d'ici. Ici, vous pouvez voir que le toucher est suffisant et que l'alimentation est également bonne. Mais si je recadre ici, vous pouvez voir l'option de recadrage, comme je peux recadrer cette image si je choisis ici image ouverte à partir d'ici Comme vous pouvez le voir, je suis capable de le recadrer. Permettez-moi de prendre cette image par-dessus celles-ci. Sinon, déplaçons celui-ci. Peut-être qu'ici, sine ou moi, j'ai juste pris cette ombre. Encore une fois, je vais venir ici et j'ai ajusté l'espace de travail. Passons maintenant à cette image. Maintenant, vous pouvez voir que dans cette option de recadrage, je peux essentiellement recadrer d' une extrémité comme celle-ci ou je peux le faire également par les extrémités si je le veux proportionnellement Dans ce cas, je peux faire comme ça. Ici, vous pouvez voir qu'il sera recadré proportionnellement à toutes les icônes à points bleus Je peux essentiellement recadrer cette image. Je peux également modifier l'exposition au contraste. Il s'agit du contraste, la saturation de la température de l'image Je ne veux pas mettre de reflets, cela donne une meilleure apparence et les ombres seront aussi importantes. OK. Maintenant tu sais comment tu peux le faire. Si je clique sur Enter ici, vous pouvez voir que je fais mon image ici, que je viens de recadrer. Vous pouvez également faire du masquage à partir d'ici. Pour cela, permettez-moi de prendre une autre image. Je vais juste prendre cette image en particulier d'ici. Comme vous pouvez le voir, je l'ai sur mon. Je garderai cette image jusqu'ici. Maintenant, ce que je peux faire, c'est supposer que je crée un rectangle. OK ? Et je viens créer ce rectangle en particulier et je veux le mettre au-dessus. OK, en plus de ça , je vais juste le masquer, ou je vais garder celui-ci ici. Sélectionnez maintenant ces deux couches. Maintenant, ce que je vais faire, c'est que j'ai sélectionné à nouveau les deux, je vais simplement masquer cela. Ce que je vais faire, c'est changer l'opacité à zéro. Entrez ici. Vous avez l'image, ou quel est le problème ici ? À partir de là, je peux modifier l' opacité. J'y retournerai. Je ne veux pas masquer, changer l'opacité à partir d'ici Zéro. Maintenant, je vais pouvoir voir, c'est la page d'image que j'ai ici. Comme vous pouvez le voir, celle-ci est l'image, c'est ainsi que je peux masquer. Et je vais vous montrer l'autre façon de procéder. Je vais supprimer la photo d'ici. J'en ai un ici. Je vais également le supprimer. Je vais prendre une autre photo. Maintenant, ce que je vais faire, c'est revenir à l'option ou je vais simplement cliquer sur Control Shift. De là, je vais prendre une autre image. Je vais ouvrir celui-ci. Maintenant j'ai cette image. Je vais juste le dire comme ça. Quoi, ce gin ? Je vais faire cette image d'ici, je vais prendre forme ici. J'ai ma boîte rectangulaire ici. J'ai ces choses ici. Ou je vais d'abord supprimer cette image. Prends celui-ci d'ici. Laissez-moi juste définir la taille ici. Maintenant, je vais venir d'ici. Je veux placer une image ici. Vous pouvez voir, choisir une image. Je vais ouvrir celui-ci ici, en fait. Maintenant, je vais pouvoir augmenter la taille. Supposons que je prenne une ellipse à la place. OK ? Et je vais le garder ici. Placez cette image d'ici. À partir d'ici, ouvrez. J'ai placé cette image d'ici et je viendrai ici et j'utiliserai l' option pour recadrer à partir d'ici. En gros, je peux choisir toutes ces choses sur la manière dont nous pouvons réellement travailler ici. Je peux donc ajuster cela un peu plus si je suis l'option de recadrage déjà légèrement venue ici. Celui-ci est bon. Je peux simplement cliquer ici et comme vous pouvez le voir à l'intérieur de l'icône, j'ai aussi l'image. OK, c'était une autre façon de procéder . Recadrer votre image et l'original ou utiliser cette option utiliser cette option est d'abord de sélectionner une forme Permettez-moi de prendre un triangle à partir de là. Maintenant, je vais l'apporter ici. Ce que je veux faire, c'est simplement mettre sous l'image. OK, voilà. Je vais mettre celui-ci sous l'image. OK, j'ai ce polygone. Oui, ici vous pouvez voir l'image en haut. Et j'ai la forme juste à l'extérieur. Je vais l'apporter au centre. Je vais également ajouter juste la hauteur, d'accord. Oui, c'est un combat. Maintenant, une fois que j'ai sélectionné ces deux couches ici, comme vous pouvez le voir, je peux cliquer sur cette option, d'accord ? Mais si je ne clique que sur celui-ci ici, accord, j'aurai autre chose ici. OK. Je vais cliquer sur les deux. Je vais m'en servir comme masque ici. Vous pouvez voir que celui-ci est un masque. Maintenant, je peux aussi modifier le réglage à partir d'ici, viens ici, comme ça. Je peux essentiellement recadrer l'image comme je le souhaite. OK, c'est une façon de le faire. Si je clique sur Enter, vous pouvez voir l'image ou la forme à l'intérieur de laquelle j'ai l'image où j' ai utilisé cette option comme masquage ici dans mon calque De plus, vous pouvez voir que j'ai un groupe de masques. Je peux également le renommer comme je le souhaite. J'écrirai Masking One. Je vais cliquer sur Entrer ici. Vous pouvez voir qu'une fois que j'ai sélectionné celui-ci, tout est sélectionné. Mais si je clique simplement sur celui-ci à partir d'ici, je peux également l'ajuster, comme vous pouvez le voir, je peux l'ajuster comme ça si je veux ajuster le polygone Je peux l'ajuster comme ça. OK ? Nous pouvons donc également l'ajuster à partir d' ici comme nous le souhaitons. Quelles formes avons-nous prises ? OK, ça dépend de tout ça. La même chose que nous pouvons également faire dans de nombreux cadres de préréglages. OK ? Mais pour mettre toutes ces icônes dans ma page Web, nous créons essentiellement des formes au lieu d'un cadre entier. OK, maintenant je ai montré comment vous pouvez faire du masquage, comment vous pouvez recadrer de différentes manières Supposons maintenant que si je prends un texte d'ici, accord, je veux d'abord écrire à l'intérieur de ce texte. Je vais venir ici. Ou avec ma main aussi. Voyons quelles sont toutes les autres images que nous avons ici. OK, je vais sélectionner cette image. Amène-le quelque part ici. Maintenant, je vais juste augmenter la taille. Je vais juste augmenter la taille comme vous pouvez le voir ici. J'ai dû déplacer le côté. Maintenant, avec mon type aussi, ce que je peux faire, c'est que je peux taper, d'accord, laisse-moi prendre la couleur blanche à partir d'ici. Tapez l'outil, sélectionnez, non ? OK, alors peut-être que je vais juste écrire comme suit : il s'agit de la page Adobe After After Effect. Je vais donc simplement écrire Adobe After Effect. OK, maintenant ce que je vais faire, c'est sélectionner tout ce texte à partir d'ici. Je vais juste sélectionner l'ensemble. Maintenant, je vais d'abord venir changer de couleur. Je vais le rendre blanc. Ce que je vais faire, c'est simplement augmenter la taille de ce texte en particulier. D'accord, pour cela, je dois également sélectionner les deux touches de commande. Puis ce bouton juste ici, qui est le bouton Full Stop. OK, je vais cliquer dessus, puis sur le bouton Full Stop ici, vous pouvez voir que c'est l'un des moyens les plus courts de travailler ici. OK ? Ou augmentez simplement la taille de police. Ça a l'air bien, pas mal. Maintenant, ce que je peux faire, c'est venir ici, je peux juste voir ce texte. OK ? Si je clique sur cette page bleue juste ici, change de couleur ou d'opacité Zoomez légèrement. Je dois juste dire que la qualité de l'image n'est pas très bonne. Mais pour vous montrer un exemple, ce sera bien. Je vais juste mettre ce texte en dessous de ce cadre. Maintenant, je veux prendre celui-ci. Où se trouve l'image en gros ? Voyons cette image. Je veux le mettre en dessous de celui-ci. Maintenant tu ne peux pas voir. Ce que je vais faire, c'est maintenant que je vais passer à zéro. Maintenant, si je sélectionne les deux, utilise le masquage ici. Maintenant, ce texte, je vais le placer en haut, dans ce coin. Je vais ajuster un peu la taille. Peut-être que 48 c'est bien. Oui, je vais essayer de l'ajuster pour l'amener ici. Oui, ici c'est bon. Maintenant, je vais sélectionner les deux options et je vais cliquer sur cette option juste en haut. OK. Oui, une chose que j'ai oubliée, que je dois mettre celui-ci en haut. OK, l'image en haut de mon écriture. Maintenant, si je clique simplement sur ce masquage ici, vous pourrez le voir Maintenant, j'ai cette option de masquage ici. OK, donc je peux voir en dessous, accord, si c'est moi qui porte le masque. Voici à quoi cela ressemblera si je possède le masquage. C'est cet effet qu'il va me donner ici. C'est ainsi que cela fonctionne réellement. J'espère que vous avez compris ce cours sur le masquage et le recadrage J'espère vous voir tous dans le prochain tutoriel où nous découvrirons contraintes et les effets avant de terminer ce cours. Permettez-moi également de vous montrer comment nous pouvons réellement télécharger des images gratuites et comment nous pouvons réellement obtenir ces images dans vos plugins. Pour cela, je vais accéder à mon Chrome à partir d'ici. Je vais faire une recherche sur Splash ici. J'ai un site Web sur lequel je peux obtenir des images gratuites, mais si vous travaillez pour une entreprise ou quoi que ce soit d'autre, vous pouvez simplement leur demander de consulter leur profil et voir ce qui peut être utilisé et ce qui ne peut pas être utilisé. OK ? Si vous souhaitez vous connecter avec eux, vous pouvez essentiellement vous connecter avec eux. Et si vous voulez les suivre, vous pouvez également les suivre d'ici, vous pouvez voir toutes ces images ici. Vous pouvez voir, d'accord, supposons que je prenne ça, laisse-moi juste prendre une photo. Après avoir cliqué sur l'image ici, vous pouvez voir toutes les informations de base, telles que le nombre de vues qu'ils ont obtenues et le nombre de téléchargements. Si vous souhaitez le signaler par hasard, vous pouvez le faire d'ici. Vous pouvez également voir quand il est publié, sur quel appareil photo et tout est utilisé. Les pixels sont un autre site Web que vous pouvez utiliser. Si je passe aux pixels d'ici, d'ici vous pouvez voir, vous pouvez rechercher les images ici. Et vous pouvez également voir la licence. Comme ce que tout le monde est autorisé à utiliser. À quelles fins ? Ici, toutes les photos et vidéos, les pixels sont libres d'utilisation. L'attribution n'est pas requise. Par exemple, vous n'avez pas à mentionner le nom de la personne ou des personnes qui l' ont créé lorsque vous le montrez dans votre travail, mais nous devons simplement mentionner le nom d'un photographe, sinon pixels ne sont pas nécessaires, mais ils sont toujours appréciés. Ce n'est pas nécessaire, mais si vous le souhaitez, c' mais si vous le souhaitez, c' est un bon geste à partir de là. Vous pouvez également modifier ces photos, vidéos à partir de pixels, essayer de faire preuve de créativité et les modifier à votre guise. Si vous faites quelque chose d'identifiable, il se peut que les gens n'apparaissent pas sous un mauvais jour ou d'une manière offensante, comme vous pouvez simplement mettre leur image et faire de mauvaises retouches. Supposons que vous ne puissiez pas simplement l'utiliser à mauvaises fins, comme le dit tout cela. Maintenant, si je reviens à mon Fagin, je vais simplement supprimer tout cela Supprimez également celui-ci. Maintenant, je suis venu ici dans ma communauté de Figma. J'y retournerai et je rechercherai trois images. Je vais juste prendre les connecteurs à partir d'ici. Vous pouvez voir que j'ai toutes ces choses ici et ici. J'ai aussi la possibilité d'utiliser Unsplash. OK ? Si je veux juste essayer celui-ci en particulier, je peux essayer celui-ci en particulier. Comment tu peux l'utiliser si je lance celui-ci. Voyons ce qui va apparaître ici. Venons-en à ces plugins, et maintenant j'ai aussi mon point de contact ici. Comme vous pouvez tous le constater, ils sont en train d'ouvrir le fichier. Voici à quoi cela ressemblera également ici. À partir de là, vous pouvez essentiellement voir différents préréglages. Vous pouvez effectuer une recherche dans certains fichiers éditoriaux. Si je clique sur celui-ci ici, vous pouvez voir que cette image est automatiquement téléchargée. OK, j'ai inséré une image comme vous pouvez le voir. Maintenant, je peux juste mettre ça de côté. Retournez et je vais juste m'adapter. Je vais juste garder celui-ci. Retournez et je pourrai donner la taille en fonction de mes besoins. OK, décalez et je pourrai diminuer la taille de cette image. Encore une fois, zoomez sur l'intérieur. Voici à quoi ressemblera ma photo. Si je le branche. C'est l'un des moyens les plus simples de le faire. De même, si je reviens dans la communauté , vous verrez que j' ai également d'autres applications à partir desquelles je peux simplement télécharger des images. OK. Voici donc mon générateur eBay par Free Pick. Vous pouvez également l'utiliser . OK, à partir de là, je peux ajouter ce plug-in. J'espère que vous avez compris ce cours sur la façon de masquer et de lâcher. Vous pouvez également ajouter certaines des meilleures images et des images librement utilisées. Je vous ai montré le site Web et maintenant vous pouvez également le télécharger dans votre plugin, j'espère vous voir tous au prochain cours. 17. Composant et effets: Bonjour à tous, et bienvenue à un autre cours sur Figma Dans ce cours, je vais vous apprendre comment créer une composition et comment utiliser différents types d' effets dans ce logiciel en particulier. Donc, ici, je vais vous apprendre comment créer un bouton et ensuite comment vous pouvez l'utiliser dans votre même projet, sur une page différente. Je vais également vous montrer comment enregistrer un effet et utiliser différents types d'effets pour différents types de vues. OK, alors commençons par ce cours. Maintenant, je suis de nouveau dans l'espace de travail. Et à partir de là, je vais vous montrer les éléments nécessaires pour cela. Je vais d'abord venir ici, prendre un cercle et comme vous pouvez le voir, j'ai ce cercle. Avec ce composant, je peux réellement créer des boutons. OK. Je vais taper, je vais augmenter ce 226. Sélectionnez celui-ci. Je vais le supprimer. Reprenez à nouveau. À partir de là, je vais augmenter la taille 40, 45. Maintenant, je vais juste taper, peut-être que j'en ai besoin d'un peu plus gros. Je vais écrire un plaidoyer. Je peux sélectionner ce que je veux. J'ai actionné le levier de commande et cette touche. Il suffit de cliquer dessus jusqu'à ce qu'il atteigne la taille souhaitée. Et c'est très bien. Audacieux. Sélectionnez cette option à nouveau. Je vais mettre celui-ci entre le cercle. Maintenant, je peux également ajouter n'importe quelle couleur à ce cercle. Supposons que je veuille ajouter une couleur rouge, ou peut-être une couleur verte. Je peux le faire d'ici. OK, maintenant ce que je peux faire, c'est que, comme j'ai deux composants ici, je peux sélectionner les deux à partir d'ici. Comme vous pouvez le voir, j'ai la possibilité de créer un composant et le raccourci clavier pour cela est Control plus A plus K. Je peux cliquer dessus ou cliquer sur cette option ici. Comme vous pouvez le voir, une fois que j'ai ce composant, il est enregistré. Maintenant, permettez-moi de créer une autre page. D'accord, je vais créer un nouveau fichier de conception après avoir créé un nouveau fichier de conception ici. Si je choisis l'option attendue ici, si je viens et ici, si j'essaie de voir, d' accord, si j'explore la bibliothèque, oui, j'ai fait une erreur ici. Cela ne fonctionnera pas dans un nouveau fichier, d'accord. Cela ne fonctionnera pas dans un nouveau fichier, mais ce composant apparaîtra dans le même projet. Mais si j'essaie de créer un nouveau projet, supposément à partir d'ici, si j'essaie de créer un nouveau fichier de conception, j'aurais ce composant. Mais dans le même projet, différentes pages, vous pourrez voir cela. Laissez-moi vous montrer ici. J'ai celui-ci et j'ai créé une page numéro deux. À la deuxième page, si j'en viens aux actifs, j'ai le composant local avec shift. Je peux vraiment baisser ça. Control Shift, je peux gros réduire la taille de celui-ci. Encore une fois, augmentez cela comme ça. OK. Changement de commande. Oui, c'est bon. C'est ainsi que je peux le faire. Si je veux diminuer la taille, je peux aussi la diminuer comme je le souhaite ici. Je l'ai, supposons que je veuille le diminuer. À partir de là, je peux le diminuer. OK. J'espère que vous avez compris ce cours ici. Découvrons maintenant les effets. D'accord, comme la façon dont nous pouvons créer différents effets pour cela. Encore une fois, je vais prendre une autre forme à partir d'ici. Prenons un polygone. Maintenant, j'ai pris un polygone d'ici. C'est ce que j'ai sélectionné. Maintenant, ce que je vais faire, c'est venir ici sur l'option des effets. Ici, vous pouvez voir l'option Drop Shadow. À partir de là, je peux essentiellement changer l'ombre. L'axe X est modifié, maintenant l'axe Y. Ici tu peux voir. Comment tu peux le faire ? Mettez en place des couleurs différentes. OK ? Vous pouvez également choisir une couleur différente à partir d'ici. En outre, vous pouvez également choisir la profondeur de la couleur. OK ? Ici, si je prends ceci ou X, je peux aussi me contenter de tout cela. OK ? C'est une façon de le faire dans le même appareil. Permettez-moi de vous parler de l'ombre intérieure. C'est l'ombre intérieure. la même manière que vous pouvez le voir, vous pouvez réellement modifier les axes x et y. Les deux sont assez similaires. Ici, vous pouvez voir le flou. Eh bien, si vous voulez changer de couleur, vous pouvez changer de couleur. D'ici. Il y aura une ombre intérieure avant qu'elle ne brille, mais cette ombre se trouve à l'intérieur de mon objet OK. Voyons maintenant cette troisième option sous forme de flou de couche OK ? Si je veux flouter cette couche en particulier, quelle mesure je veux la rendre floue, je le fais vraiment comme ça, Là, vous pouvez voir l'effet de flou ici. Vous pouvez voir à nouveau l'effet de flou Si je sélectionne celui-ci et que je passe à la dernière option ici, qui est le flou d' arrière-plan, d'accord, je peux également choisir OK ? Je peux aussi le faire d'ici. OK ? Mais laissez-moi prendre une photo juste pour vous montrer d'ici. Je vais peut-être prendre la même image ici. Maintenant, je vais simplement garder cette image quelque part ici, car j'ai cette image. Au lieu de cela, laissez-moi prendre un rectangle. Ce qui va se passer maintenant, c'est si je crée juste un rectangle dessus, si je viens ici, si je passe à l'option des effets que je peux faire est le flou d'arrière-plan Eh bien, pas ça, en gros. Va voir Drop Shadow. Passez à ce remplissage, changez simplement l'opacité à dix. OK, vous pouvez voir que j'ai mon image ici, laissez-moi déplacer ce composant quelque part ici. Maintenant, ce que vous pouvez faire, c'est qu'il possède son propre cadre. Maintenant, une fois que je serai ici, je pourrai essentiellement changer le cadrage La couleur de l'image changera également, mais cela se produit juste en dessous à partir d'ici. Sélectionnez ceci, je vais juste mettre un petit effet ici. Je peux aussi prendre différentes couleurs. OK ? Je vais peut-être augmenter ce montant un peu. Maintenant, j'espère que vous pouvez voir le cadrage juste sur ma photo Parfois, cela peut sembler beau, mais le projet que vous réalisez dépend de vous. C'est une façon dont nous pouvons jouer avec les effets ici. J'espère que vous avez compris. Et si j'ai deux ou trois effets ici et que je ne veux pas les voir, je peux simplement cliquer sur celui-ci. Et je ne montrerai pas mon effet sur celui-ci en particulier. Si je veux ajouter un effet, je peux simplement cliquer dessus. Une fois que j'ai cliqué dessus, ce paramètre particulier y sera enregistré. OK, j'espère que vous avez compris ce cours en particulier. prochain cours sera le dernier de ce didacticiel où je vais vous apprendre comment exporter votre image depuis cette application de commentaires. Prends soin de tout le monde. J'espère vous voir tous prochainement. 18. Exporter des images: Bonjour à tous, et bienvenue dans le tutoriel sur Figma Ce sera donc le dernier cours du tutoriel Figma Et si vous êtes arrivés jusqu'ici, j'espère que vous avez apprécié le cours et merci d'avoir assisté à ce cours. Et le dernier chapitre expliquera comment vous pouvez exporter ces images à partir de l'application en question, ainsi différentes manières et les différents formats de les exporter. Si vous souhaitez exporter le cadre entier, vous pouvez le faire si vous souhaitez exporter un élément en particulier. En gros, je vais vous montrer des images ici, je vais vous montrer tout ça. Commençons par ce dernier cours de Figma ici. J'ai mon espace de travail. Je souhaite sélectionner cette image particulière à partir d'ici, uniquement celle-ci que je souhaite exporter. Dans ce cas, ce que je vais faire, c'est que je vais venir ici pour l'option d'exportation. Cliquez ici, vous pouvez voir dans quel format je vais prendre, celui-ci ici. J'ai le format PNG, JPG, SVG et le format PDF Si je veux avoir un aperçu ce que j'exporte, je peux le voir ici. D'accord, je réduis simplement la taille de celui-ci. C'est ce que j' exporte vers mon système. Je vais juste exporter ce truc en particulier d'ici. Passez à l'option d'exportation. Maintenant, je vais sélectionner les deux X, OK, c'est juste la résolution. Si je regarde sur un ordinateur à mémoire vive ou rapide ou sur un PC, je peux sélectionner celui-ci, qui me donnera une haute résolution de cette image. Au lieu du format PNG, je vais prendre un JPG et j'exporterai ce cadre en particulier. Je peux sélectionner le nom que je souhaite donner. Je vais l'écrire sous forme de fichier Figma. Maintenant, je peux sélectionner l'endroit où je veux le placer, l' enregistrer ici. Maintenant, si je passe à celui-ci ici, mon explorateur de fichiers, et je passerai à mes téléchargements à partir d'ici. Vous pouvez voir que j'ai ce dossier. Laissez-moi voir à quoi ça ressemble réellement. C'est celui que j'ai juste à partir de l' option image. C'est la même chose. Laisse-moi le faire d'ici. OK. Supposons que je veuille prendre un x, d'accord ? Ou 0,75 x. Exportez le cadre, enregistrez celui-ci, venez le voir également Comme je l'ai téléchargé ici, vous pouvez voir que la taille est inférieure ici, mais là, il y avait deux x, maintenant c'est 0,75 ici Si je zoome également sur mon image, la qualité de l'image est bien meilleure. Mais ici, de la même manière, si j'arrive à ce fichier, si je zoome, vous pouvez voir que la qualité n'est pas très bonne par rapport à l'autre, d'accord ? C'est l'une des façons dont nous pouvons le faire. Pour mon PC, je prends essentiellement deux x un, d'accord ? Vous pouvez également faire trois œufs, quatre œufs. Si vous souhaitez modifier la largeur ici, vous pouvez également modifier la largeur, différentes méthodes d'utilisation. Si vous souhaitez enregistrer ce paramètre d'exportation, vous pouvez simplement cliquer ici et ajouter n'importe quel suffixe à partir d'ici, exemple si vous souhaitez utiliser 512 D'accord, je vais exporter ce fichier 512 et exporter les deux images ici. Accédez aux téléchargements et enregistrez-le. Permettez-moi de revenir à ce fichier ici, nous voyons des téléchargements se remplacer. Oui, je vais en avoir par ici. OK. Une fois que je l' ai, je vais cliquer ici. Vous pouvez voir cette image, ou peut-être que c'est celle-ci. OK, ici vous pouvez voir que la largeur de cette image a changé. Dans celui-ci, ils ont modifié la hauteur de l'image. J'espère que vous avez compris comment nous pouvons essentiellement utiliser ou exporter votre image à partir de cette application particulière, puis vous pourrez également l'utiliser à d'autres endroits. C'était le dernier. J' espère que vous avez apprécié et appris tout ce que j'ai expliqué et que vous connaissez maintenant cette option ou cette application en particulier. Continuez à vous entraîner avec votre design pour que plus vous en utilisez, plus vous y travaillez, plus vous en apprenez sur tout. Je vous ai également donné certains des projets de classe de projet que vous soumettrez sur le panel des projets. J'ai vraiment hâte de voir ce que vous allez faire. Envoyez-moi votre travail et laissez-moi voir que vous avez appris grâce à ce didacticiel. Prenez soin de vous et au revoir à tous. 19. Projet de classe 2: Bonjour les gars. C'est le moment de passer projet de classe et nous en sommes à notre projet de classe numéro deux, où vous allez créer votre propre design. Qu'il s'agisse de la conception d'une application mobile ou d'une conception de page Web, cela dépend totalement de vous. Après cela, vous devez faire du prototypage. Dans le didacticiel, je vous ai déjà montré comment vous pouvez effectuer ces quelques étapes que je vais vous montrer et vous donner une démo. Passons à celui-ci. La première chose à faire est que vous devez créer votre propre design. Et comme je vous l'ai dit, il peut s'agir d'un design Web ou même d'un design d'application mobile. Assurez-vous que vous utilisez un minimum de quatre images. Mais si vous créez quelque chose de plus grand ou de dix cadres ou plus, vous êtes toujours les bienvenus. J'adorerais vraiment découvrir vos œuvres. OK, après cela, vous devez passer à l'option de prototypage, qui se trouve juste à côté de l'option de conception Et connectez les cadres avec l'icône des icônes aux cadres. Ensuite, activez le mode présent Comme je le sais, il existe deux modes, le mode présent et le mode aperçu. Il suffit de présenter le mode car il s' ouvrira dans une nouvelle fenêtre. Ensuite, partagez simplement le lien de votre projet dans notre fenêtre de projet et je les vérifierai. Découvrez les progrès que vous avez réalisés, puis ce que vous avez appris grâce au didacticiel. Permettez-moi de vous montrer une démo ici. Ici, j'ai déjà fait du design. D'accord, je vous ai également montré ce design dans le tutoriel. Je vais juste vous montrer le prototypage car j'en ai déjà fait le design Mais vous créez votre propre design, essayez de créer ces choses. Vous pouvez également obtenir de l'aide auprès de la communauté Figma. Reprenez leurs polices, icônes, leur style payant. Vous pouvez les prendre et les fabriquer vous-même. OK, maintenant je vais passer à l'option prototype. Après avoir choisi l'option prototype ici, vous pouvez voir que je peux la sélectionner ici, comme vous pouvez le voir. Et je vais lier ce cygne à cette page. Et je peux aussi changer cela. Il doit être instantané ou dissous. Laissez-moi juste le dissoudre. Je vais simplement sélectionner ce bouton ici. Prends ce cygne et connecte-toi à lui. OK ? Entrez, puis celle-ci, la dernière, d'accord ? Et entrez. Et je veux revenir à ma page d'accueil chaque fois que je clique sur ce bouton d'accueil en particulier. Donc, je vais simplement connecter tous les boutons d'accueil à la première page. Entrez. OK, celui-ci. Entrez. Sélectionnez à nouveau celui-ci. Je vais me connecter à celui-ci, puis j'appuierai sur Entrée. J'ai fait mon prototypage. Si je veux voir le prototypage ici, vous pouvez voir que j'ai connecté des icônes à des cadres, des cadres à des icônes Maintenant, ce que vous allez faire, c'est que vous allez venir ici sur cette option et sélectionner cette option actuelle. OK, ce n'est pas l'aperçu du présent. Ici, vous pourrez voir qu' il se charge dans une nouvelle page ou une nouvelle fenêtre. OK, maintenant ce que je peux faire, c'est que si je clique sur ce bouton de relaxation vous verrez que je peux y retourner. Cliquez sur cette page, je suis là. Revenons à celui-ci. Encore une fois, de la même manière que je peux le faire. Si je peux également revenir manuellement ici, je peux cliquer sur celui-ci, il sera directement redirigé vers cette page. Tout ce que vous pouvez faire, c'est partager votre travail avec moi. Venez ici dans l'option de prototype partagé, il suffit de cliquer ici. OK, tous ceux qui ont le lien. Et dis-le comme je peux le voir, car je ne modifierai pas le tien. OK, il suffit de sélectionner celui-ci et vous pouvez simplement copier le lien à partir d'ici. Et il suffit de mettre ce lien en particulier dans notre boîte de projet. C'est aussi simple que ça. J'espère voir tout votre travail et la façon dont vous concevez votre page. je verrai votre capacité Après avoir rejoint ce cours, concevoir votre propre page Web et à prototyper en conséquence. Prenez soin de vous, tout le monde, j'espère voir votre travail ainsi. 20. Projet de classe 3: Bonjour les gars, et maintenant c'est l'heure des projets de classe. Vous allez maintenant faire le projet de classe numéro trois lors du dernier projet de classe, où vous allez créer votre propre dégradé. D'accord ? Pour créer un dégradé, je vous l'ai déjà montré dans le tutoriel. Si vous rencontrez un problème, vous pouvez toujours consulter le didacticiel. OK, je vais vous montrer les étapes de ce qui doit être fait. Allons-y. abord, vous devez créer n'importe quel type de forme en utilisant la forme , qu'il s'agisse d'une étoile, d'un rectangle, d'un carré ou d'un polygone D'accord ? Ensuite, vous pouvez accéder à l'option de remplissage. Et à partir de l'option de remplissage, vous pouvez accéder au dégradé. Ensuite, choisissez n'importe quel style de dégradé, car il existe essentiellement quatre styles de dégradé, mode radio linéaire et l'angle. OK, vous pouvez choisir n'importe lequel d'ici. Ensuite, vous devez ajouter d'autres couleurs à votre dégradé. Continuez comme ça. Et au moins cinq couleurs que vous devez choisir. Après ça. La dernière étape consistera à exporter cette zone de dégradé ou forme de dégradé dans votre système et vous pourrez la télécharger dans notre section projet. OK, voyons comment vous allez faire ça pour moi. Ce que je vais faire, c'est prendre une boîte rectangulaire uniquement après être arrivée à cette boîte rectangulaire ici. Vous pouvez voir que j'ai l'option de remplissage ici. D'accord ? Sous la pilule, je vais passer à cette option de dégradé, qui se trouve juste à côté de l'option solide à partir d'ici. Maintenant, j'ai cette option, linéaire, radiale, angulaire et en losange sous le dégradé. Mais ce que je vais faire c'est sélectionner le linéaire. Et comme je vous l'ai déjà dit dans le tutoriel j'aime utiliser le linéaire et le radial, j'en veux plus. Je choisirai n'importe quelle couleur en particulier à partir d'ici. Supposons que je choisisse quelque chose de sombre. D'accord, je vais prendre cette couleur et j'ajouterai d'autres couleurs ici. Alors, quelle couleur je vais choisir ? Permettez-moi de prendre celui-ci, puis d'ajouter une autre case ici. Maintenant, laisse-moi prendre quelque chose de plus léger. D'accord ? Comme vous pouvez le voir, je peux le faire selon mes besoins et je suis capable de le faire comme je le souhaite. Maintenant, j'en ai trois et je reviens au rouge, ou j'y retourne, prends une autre ici, et je vais juste prendre une couleur rouge. Je vais prendre un rouge. Le dernier, que je vais prendre ici, est de cette couleur, et je vais prendre un jaune. OK. Et dans toutes ces couleurs, je peux essentiellement choisir le uni si je veux, si je veux l' estomper, je peux le faire. Je peux toujours conserver cette doublure ici, ces cinq couleurs ici, comme vous pouvez le voir ici. Je peux changer l'obscurité ici. Ici, j'ai le dégradé de couleurs que j'ai sélectionné. Et vous pouvez également modifier l'opacité à partir d'ici. Si tu veux qu'il fasse nuit, tu peux aller de ce côté. J'ai tout expliqué dans le tutoriel. Maintenant, la prochaine chose que je vais faire est de vouloir exporter celui-ci. Sélectionnez cette option, puis cliquez sur Exporter. Ici, vous pouvez voir, je peux voir un aperçu de ce à quoi cela ressemblera si celui-ci est un PNG. Et ici, j'ai l'aperçu d'un JP. Vous pouvez télécharger ce que vous voulez. Rectangle d'exportation en trois X. Oui, je vais juste le dire maintenant. Regardons celui-ci ici. Vous pouvez voir que je fais mon dégradé ici dans lequel j'ai utilisé cinq couleurs différentes ou cinq nuances différentes. J'attends de voir comment vous créez votre propre dégradé et je veux voir comment vous pouvez créer les couleurs et comprendre le design de votre couleur. Je suis très curieux de voir tout ça. Prends soin de tout le monde. J'espère juste voir du bon travail de votre part et de la part de tout le monde.