Design Figma UI/UX pour les débutants absolus : créer un tableau de bord Fintech

1. Intro: La création de produits numériques intuitifs et conviviaux est essentielle à l'ère numérique d' aujourd'hui. succès d'un logiciel ou d'une application dépend en grande partie son interface utilisateur et la simplicité de son parcours utilisateur. De nombreux produits numériques qui ont échoué par le passé ont échoué parce qu'ils ignoraient l'étape cruciale de la conception d'un prototype, ce qui les a amenés à prendre de mauvaises décisions en matière de placement des éléments, entraîné une mauvaise expérience utilisateur pour les clients. Au lieu de vous lancer directement dans le codage, il est important que vous fassiez appel à un concepteur pour créer une mise en page détaillée pour chaque page. Cela vous permet de voir à quoi ressemblera le produit final avant de le créer, ce qui vous permet de réfléchir à des améliorations avant de toucher à une ligne de code Et si vous pouvez le concevoir vous-même, c' est encore mieux car vous n'aurez pas à dépenser beaucoup d'argent pour un concepteur d'interface utilisateur et d'expérience utilisateur. Et ce cours a pour but de vous montrer comment faire exactement cela. Je vais vous montrer comment utiliser FIMA pour concevoir magnifiques interfaces utilisateur pour vos applications logicielles et vos produits Web, veillant à ce que chaque élément soit correctement placé pour une expérience utilisateur améliorée À la fin de ce cours, vous aurez créé votre propre tableau de bord pour une société financière fictive, et vous aurez les compétences nécessaires pour créer vos propres interfaces utilisateur avec Figma à l'avenir Et juste au cas où vous vous demanderiez qui je suis, je m'appelle Ken, et depuis cinq ans, j'aide les gens à apprendre à créer sites Web professionnels avec Elementor Je peux consulter mon profil pour voir mes récents travaux. Tout au long du cours, je vais vous présenter l'éditeur Figma, vous apprendre à utiliser les outils Figma les plus couramment utilisés et vous montrer comment organiser vos projets de conception Et comme je l'ai mentionné, vous apprendrez en travaillant sur un projet réel, qui se traduira un magnifique tableau de bord pour une application Web fictive. Nous ne faisons pas de théorie ici. Donc, comme vous pouvez le voir maintenant, ce cours sera pratique , il est conçu pour vous faire passer rapidement du statut de novice à celui d'utilisateur confiant de Figma Mais vous vous demandez peut-être aussi ce cours est pour moi ? Alors, à qui s'adresse ce cours ? Eh bien, ce cours s'adresse aux futurs concepteurs d'UIUX qui souhaitent se familiariser avec l'outil de conception UIUX le plus populaire du secteur Donc, si vous avez toujours voulu apprendre à utiliser Figma, le principal outil de conception UIUX, ce cours est fait pour Ce cours s'adresse également aux entrepreneurs qui souhaitent créer leurs propres produits numériques. Donc, si vous êtes un entrepreneur ou un développeur Web, mais que vous souhaitez acquérir des compétences en conception afin de pouvoir concevoir votre propre logiciel avant d'écrire votre code. Ce cours est un bon début pour toi. Je suis donc très heureuse de commencer, et si vous êtes aussi enthousiaste que moi, explorons ensemble le monde de Figma Mais avant d'entrer dans le vif du sujet, jetons un coup d'œil au projet de classe sur lequel nous travaillerons tout au long du cours. Allons-y. 2. Aperçu du projet: Comme je le souligne toujours, le meilleur moyen d' acquérir une nouvelle compétence, en particulier une compétence technique, est de travailler sur un projet. Dans cette leçon, je veux vous montrer ce que nous allons construire. Je suis donc dans mon éditeur, et voici le tableau de bord que nous allons créer. Comme vous pouvez le constater, tout d'abord, c'est très bien organisé. Nous l'avons comme tableau de bord. Mais maintenant, si nous commençons à développer chaque partie du tableau de bord, vous remarquerez que le tableau de bord est composé de trois parties principales. Barre de recherche, qui est cette section qui contient toutes ces icônes et la barre de recherche elle-même. Nous avons la barre latérale, qui est composée du logo, de tous ces boutons de la barre latérale et de ce contenu, et je peux la faire glisser. En le sélectionnant, je peux également le faire glisser. Et nous avons le contenu principal, qui est composé, bien sûr, du contenu principal que vous voulez consulter, et je peux tout déplacer. Si je développe le contenu principal, il est également bien organisé en différentes parties. Permettez-moi donc de cliquer ici. Si je survole un élément, vous le verrez surligné dans l'illustration elle-même. Alors jetez un œil à ça. Par exemple, si je sélectionne cette fiche de revenus totaux, je l'appellerai « total des revenus » parce que, bien entendu, c'est la carte qui indique le total des revenus. Il s'agit du bénéfice net, des paiements en attente, des dépenses. Ceci est groupé. Je peux le transporter et réorganiser toute la section. Le fait est que c'est aussi un groupe d'autres contenus. Nous imbriquons des objets ou des éléments de plus en plus profondément. Nous sommes partis du tableau de bord. , sont imbriqués dans le tableau de bord Ces trois éléments, ces trois groupes, sont imbriqués dans le tableau de bord, et les cartes contenant différents types de contenu sont imbriquées dans le contenu principal cartes contenant différents types de contenu sont imbriquées dans le Et à l'intérieur de chaque carte trouvent d'autres éléments qui la composent. Par exemple, nous avons ce groupe dont le pourcentage augmente ou diminue. Dans le passé, peut-être dans les revenus totaux ou dans les bénéfices nets. Il y a eu une baisse de 3,4, une augmentation des revenus totaux, 3,8, et c'est un groupe qui possède également le 3,8, la flèche et le rectangle qui le soutiennent. Donc, imbriquer des éléments dans des éléments au sein d'éléments. Je vais vous montrer comment organiser votre travail et comment créer chaque élément de ce tableau de bord afin qu'à chaque élément de ce tableau de la fin, vous ayez un tableau de bord comme celui-ci à montrer ou à présenter à vos amis ou collègues. En même temps, n'oubliez pas que nous allons repartir de zéro. Nous n'allons utiliser les modèles de personne. Nous allons partir de l'arrière-plan. Ajoutez ensuite des boutons. Ajoutez le logo. Nous allons créer chaque carte à partir de zéro, en ajoutant chaque élément. Cela vous permettra de comprendre comment utiliser tous ces différents outils que vous utiliserez la plupart du temps lorsque vous travaillerez dans Figma L'objectif est de vous donner un guide sur les outils les plus couramment utilisés à travers des exemples. C'est le meilleur moyen d' apprendre à utiliser ces outils. Au fait, je vais vous fournir ce modèle de conception afin que vous puissiez explorer et voir exactement comment j'ai créé chaque pièce pendant que vous travaillez sur vos propres pièces. suffit donc de consulter ce lecteur vidéo ci-dessous dans l'onglet projets et ressources, et vous y trouverez le modèle ainsi tout autre élément que je trouverai utile pour vous. Juste au cas où vous voudriez voir comment j'ai créé le mien, n' oubliez pas de le télécharger. Donc, si vous êtes aussi enthousiaste que moi, si vous souhaitez apprendre à créer ce tableau de bord et acquérir les compétences nécessaires pour créer tout autre type de design UI UX, ce projet sera un bon début pour vous. Alors, sans perdre plus de temps, rencontrons-nous lors de la prochaine leçon et créons un compte Figma. Je te verrai bientôt. 3. Créer un compte Figma: Bon retour. Maintenant que nous avons un bref aperçu de ce que nous allons construire, il est temps de créer un compte sur Figma Je veux juste sortir d'ici. Je vais accéder à ce menu déroulant. Cliquez ensuite sur Retour aux fichiers. Maintenant, je vais être ramené à ma page d'accueil pour ce compte spécifique. Si je clique sur ce menu déroulant, comme vous pouvez le voir, je suis actuellement connecté sous ce profil, mais je suis également connecté sous cet autre profil ici. Laisse-moi me déconnecter comme ça. Déconnectez-vous de tous les comptes. Et c'est ce que vous aurez lors de votre visite à la FIDMA. Je vais donc cliquer sur Commencer gratuitement. Nous allons utiliser le compte gratuit. Et ne t'inquiète pas. Je vais parler un peu du plan gratuit dans la prochaine leçon. Alors allons-y et créons un compte pour le moment. Maintenant, je vais simplement continuer avec un compte Google, et je vais utiliser ce compte que je n'ai jamais utilisé auparavant. Je vais cliquer sur Continuer. R, nous y voilà. Comme c'est la première fois que nous créons un compte, nous allons passer par cet assistant de configuration d'intégration, qui est très simple C'est ainsi que vous allez apparaître dans le fichier Figma. Je vais donc utiliser le nom par défaut, mais je peux cliquer ici et le modifier. Disons simplement Can the D, puis continuons. Vous pouvez également choisir de sauter certaines étapes. Poursuivre. Quel type de travail faites-vous ? Supposons que je travaille dans le développement de logiciels, car je suppose que vous voudrez peut-être concevoir des interfaces pour votre logiciel. Choisissez ce que vous voulez. Vous pouvez également en choisir un autre. Développement de logiciels, continuez. Est-ce que l'un de ces éléments décrit votre travail chez le fondateur d'une agence, disons que je suis un indépendant ou disons que je suis un fondateur Poursuivre. Avec qui collaborez-vous habituellement ? Coéquipiers, clients, personne, juste moi. Poursuivre. Je souhaite inviter des collaborateurs. Non. Vous pouvez ignorer cette étape, mais si vous souhaitez collaborer avec des personnes sur ce projet en particulier, vous pouvez leur envoyer des e-mails. Vous pouvez saisir leurs e-mails ici. Oublie ça. Qu'est-ce qui t'amène à Figma aujourd'hui ? configurer pour mon équipe, démarrer un nouveau travail ou un nouveau projet. Ouais. Et ici, vous pouvez en sélectionner un certain nombre. Donc, il suffit de vérifier les choses. Poursuivre. Avez-vous déjà utilisé Figma pour des produits ? Non, c'est ma première fois. Poursuivre. Quel plan aimerais-tu ? J'aimerais bien ce plan. Je vais donc parler plus en détail des fichiers et des projets auxquels vous avez accès avec ce plan gratuit dans la prochaine leçon. Allons-y et cliquons sur Continuer. Qu'aimerais-tu faire en premier ? Parlons donc la conception avec Figma, car nous ne voulons pas utiliser Fig Jam C'est tout un cours en soi. Terminer. Et nous y voilà. Dès que nous aurons terminé cet assistant de configuration, nous passerons à cette visite rapide qui nous montrera les différentes parties de l'éditeur. Nous n'allons pas en parler, mais prendre un moment pour parcourir l' intégralité de la visite pour découvrir les différentes parties de l'éditeur. Mais vous allez vous habituer à les utiliser au fur et à mesure que nous construirons les différentes parties de notre fichier. Il semble que, parce que je me suis déconnecté, le fichier n'est pas ouvert Ce que je vais faire, c'est me connecter à mon autre compte, ajouter ici pour que je puisse également voir ce que nous allons construire. En gros, c'est ainsi que vous pouvez créer un compte sur FIMMA. Dans la leçon suivante, nous allons parler des fichiers et des projets du plan gratuit. Je te verrai bientôt. 4. Aperçu de l'éditeur Figma: Moi. Et bon retour. Maintenant que vous avez créé un compte Figma, il est temps de jeter un coup d' œil à l'éditeur Et si vous avez également lu l'éditeur que l' on vous a demandé de parcourir avec la bulle qui se trouvait ici, vous devez avoir vu cette bulle bleue. Vous avez suivi quelques étapes et vu les différentes parties de l'éditeur. Et la dernière étape était soit de continuer à pratiquer ici, soit d'ouvrir un nouveau fichier. J'ai donc cliqué sur Créer un nouveau fichier, et maintenant je suis dans un éditeur vide C'est la même chose. Mais maintenant, bien sûr, cela a un certain contenu. Voici donc un éditeur vierge. Bien entendu, la première chose que je tiens à souligner est vous pouvez changer le nom de ce fichier en particulier, de ce fichier conception, et il se trouve actuellement dans des brouillons Donc, ce que je veux faire, c' est lui donner un nom, peut-être la conception d'une application Web pour le financement par l'IA, parce que nous concevons une application Web, une interface utilisateur d'application Web ou quelque chose du genre. Si je reviens maintenant aux fichiers, nous sommes immédiatement redirigés vers le dossier des brouillons de l'équipe de Ken Koko Comme vous pouvez le constater, nous avons une équipe créée automatiquement. Lorsque nous avons terminé l'assistant de configuration, Figma a automatiquement créé cette équipe pour nous Nous avons des brouillons et nous avons tous les Maintenant, dans tous les projets, nous n'avons que ce projet d'équipe. Nous allons parler de ce qu'est un projet, de ce qu'est une équipe, de ce qu'est une page, de ce qu'est un fichier de conception. Ne vous sentez donc pas dépassé par tout cela. qu'il faut retenir de tout cela, c' est que ces trois fichiers se trouvent dans les brouillons Voici les fichiers pratiques que nous avons examinés, par exemple celui-ci, les bases de Figma, les bases de Figma Maintenant, nous pouvons déplacer ce fichier d'ici en cliquant dessus avec le bouton droit de la souris, déplacer le fichier. Et dans l'équipe de Ken Koko, cette équipe, nous avons des brouillons Comme vous pouvez le constater, nous sommes actuellement en phase de brouillon, c'est pourquoi nous avons coché la case, mais nous pouvons le déplacer vers Tim Project Move. Maintenant, le dossier des brouillons ne contient que ces deux fichiers. Maintenant, si je passe à Tim Project, nous avons maintenant le fichier de conception de l'application Web AI Finance. Maintenant, permettez-moi de double-cliquer dessus. La première chose à faire lorsque vous voulez commencer à travailler sur un projet est d'utiliser un cadre. Je vais donc cliquer dessus. Il s'agit de l'outil de cadre. Si vous cliquez sur le menu déroulant, il contient quelques autres outils que j'utilise rarement, mais vous pouvez en savoir plus sur leur utilité Mais un cadre est ce que j' aime appeler l'écran. Ainsi, par exemple, lorsque vous sélectionnez un cadre ici, nous voyons des modèles de cadres que nous pouvons utiliser. Donc, si vous créez une application téléphonique, mais qu'il s'agit maintenant d'une application Web, disons, de bureau. Passons à l' ordinateur de bureau, par exemple. Maintenant, c'est un écran que nous pouvons commencer à remplir avec notre design Si je le supprime, et que le cadre est actif. Nous pouvons également le dessiner manuellement. Et si nous voulons modifier la taille, nous pouvons entrer ici et saisir nos dimensions manuellement. Donc, la largeur, la hauteur, la largeur ici peuvent être de 1920. Contrôle et molette de défilement pour effectuer un zoom arrière. Molette centrale de la souris Appuyez sur la molette centrale de la souris pour faire glisser la souris, et la hauteur peut être de 1080. C'est du Full HD. Voilà comment créer un écran ou un cadre. Bien entendu, il existe d'autres outils ici. Il s'agit de l'outil de sélection, et nous avons d'autres outils ici. Bien entendu, vous savez probablement déjà à quoi servent ces outils. Si vous souhaitez ajouter du texte, vous pouvez l'utiliser. Bien sûr, je sais que je passe en revue ces outils, et c'est parce que tout au long du cours, nous verrons comment travailler avec l'outil le plus couramment utilisé Ne vous inquiétez donc pas pour ça. Je te fais juste visiter les lieux. La prochaine chose que vous aurez remarquée, c'est que lorsque nous avons ajouté un cadre, celui-ci a été automatiquement créé en tant que couche. Chaque fois que nous ajoutons quelque chose, si je sélectionne l' outil rectangle et que j'ajoute un rectangle, il sera ajouté ici, mais c'est sa propre couche. Si j'ajoute du texte et que je commence à taper, c'est une autre couche. Si j' ajoute une ligne, c'est une autre couche. Tout existe sous forme de couche, mais nous pouvons les regrouper. Si je sélectionne la ligne, elle est déjà sélectionnée, et ce rectangle et les textes, vous remarquerez qu'ils sont également surlignés ici. Si j'appuie sur le contrôle G, je peux les regrouper et maintenant ils sont du premier groupe. Je peux les appeler des éléments. Si je développe les éléments, vous pouvez maintenant voir les trois éléments que nous avons ici. À l'intérieur, je peux également choisir ces deux éléments et les regrouper, Control G et Inner Group. Maintenant, ce groupe interne est imbriqué dans des éléments, qui sont imbriqués dans Si je l'élargis, nous pouvons maintenant voir ces deux-là. Si je sélectionne le groupe lui-même, je peux emporter les deux. Si je sélectionne cette option, je porte le groupe d'éléments, et si je sélectionne le cadre, je porte l' ensemble du groupe de cadres. J'espère donc que vous comprenez comment travailler avec les groupes maintenant, la hiérarchie des groupes. Maintenant, si je sélectionne cela, la touche de contrôle G, cela regroupe tous les groupes que vous avez sélectionnés. Et bien sûr, nous avons tout d'abord dissocié le groupe extérieur Maintenant, si je contrôle à nouveau le shift G, nous dissocions le groupe interne Tu peux me laisser annuler ça. Vous pouvez également sélectionner Maintenant c'est un groupe. Si je clique avec le bouton droit de la souris, je peux regrouper, comme ça. Maintenant, une fois ce rectangle sélectionné, nous allons afficher ici certaines propriétés que nous pouvons modifier. Par exemple, la couleur de remplissage, sélectionnez-la, nous pouvons la changer en rouge. Nous pouvons également ajouter un trait comme nous pouvons le voir. Donc, sélectionner plus ici ajoute un trait noir. Et si je zoome, remarque que nous avons ce trait noir, et en le sélectionnant à nouveau, nous pouvons passer au trait et ajouter sa largeur. Sélectionnez ici et utilisez la flèche de l'application sur le clavier. Nous pouvons également le changer en ligne pointillée en accédant à ce menu et en passant de solide à d, et maintenant c'est une ligne pointillée Lorsqu'il est sélectionné, nous pouvons supprimer le champ en cliquant sur le signe moins. Lorsqu'il est sélectionné, nous pouvons également jouer avec le rayon de la bordure. Ce sont les coins. Nous pouvons également simplement aller directement ici et tirer ces points. Ou nous pouvons entrer ici, cliquer dessus et saisir une valeur spécifique. Peut-être 20, et maintenant le rayon de la frontière est de 20. Si je dis 50, juste comme ça. Si je sélectionne cette icône de coins indépendants ici, nous pouvons changer le coin supérieur inférieur gauche, haut à droite, bas à droite. Essayons ça. 50 en haut à droite. Maintenant, disons zéro en haut à droite et zéro en bas à droite en bas à gauche. Nous y voilà. Si je l'ai sélectionné, nous pouvons revenir en arrière, ajouter à nouveau une couleur de remplissage et supprimer le trait. Lorsque nous sélectionnons le texte, nous affichons les propriétés relatives au texte Nous pouvons modifier l' épaisseur de la police, en gras supplémentaire. Nous pouvons également changer la taille en venant ici et en tapant peut-être 32. Nous pouvons passer de l'inter à une autre police. Tapons peut-être Montserrat Enter. Nous pouvons modifier l' alignement du texte. Maintenant, si nous avons un paragraphe. Par exemple, laissez-moi simplement copier un paragraphe de l'une de ces copies. Collez-le là. Vous remarquerez maintenant que j'ai collé un long paragraphe ici, mais il est sur une seule ligne, et c'est à cause de ce paramètre ici Il peut s'agir d'une largeur automatique, mais si vous cliquez à nouveau dessus, il peut s'agir d'une largeur automatique ou vous pouvez le modifier en taille fixe. Maintenant, laissez-moi sélectionner ce coin ici et le placer juste là. Maintenant, si je le développe, vous remarquerez qu'il est passé de ou de largeur à une taille fixe car il doit respecter les dimensions spécifiques de la zone de texte qui le contient. Maintenant, si nous le retournons à nouveau, il passe à cette seule ligne. C'est bon. Il s'agit essentiellement d'un bref aperçu de l'éditeur. Nous en apprendrons davantage sur les différentes parties de l' éditeur au fur et à mesure. N'oubliez pas que mon objectif avec ce cours est de vous montrer comment utiliser les différents outils que vous utiliserez la plupart du temps lorsque vous travaillerez dans Figma Cela dit, passons au cours suivant où nous parlerons des équipes, des projets, des fichiers de conception et des pages. Qu'est-ce qu'ils veulent dire ? Ce qui entre dans quoi. Découvrons-le. 5. Équipes, projets, dossiers et pages: Ce que je veux faire, c'est aller ce menu déroulant et revenir aux fichiers. C'est donc le projet dans lequel j'ai participé. Maintenant, avant d'aller trop loin, je voudrais tout d'abord accéder à ce menu déroulant, et comme vous pouvez le voir, je peux ajouter un compte. Permettez-moi donc d'ajouter un compte parce que je veux ouvrir notre design de référence, celui que j'avais conçu plus tôt, alors laissez-moi simplement me connecter. Et ça y est. Laisse-moi voir. Permettez-moi de double-cliquer dessus. Oui, nous y voilà. Maintenant, si je reviens aux fichiers, cet onglet, je suis connecté en tant que Ken Bs. Permettez-moi de le faire glisser pour qu'il soit le premier ici. Sur cet onglet, je suis connecté en tant que D. Vous pouvez être connecté sous différents comptes sur différents De cette façon, si je reviens au compte Ken Bersa, peux maintenant double-cliquer dessus Et ouvrez-le, et je peux simplement le déconnecter de cette fenêtre et le laisser comme sa propre fenêtre afin que nous puissions passer de l'une à l'autre avec l'onglet Alt, juste comme ça en revenir, lorsque nous avons fini de configurer notre compte Figma, lorsque nous sommes passés par cet assistant de configuration, Figma a automatiquement créé une équipe pour En ce moment, vous devriez avoir une équipe ici pour dire quelque chose à propos du thé. Une fois cela fait, je veux juste m'en débarrasser parce que c'est du cliquetis Maintenant que nous faisons partie de cette équipe, l'équipe Ken Puma. Laisse-moi juste cliquer dessus. Ouais. Assurez-vous donc de simplement cliquer sur le menu déroulant et de cliquer sur votre équipe Maintenant, tu fais partie de ton équipe. Ici, nous avons un projet. Si nous voulons un projet supplémentaire, nous devrons passer au plan pro. Si je clique dessus pour ajouter un projet ou ici, je suis invité à passer à la version professionnelle. Mais un seul projet est largement suffisant pour notre travail, nos projets personnels. Bien entendu, vous souhaiterez peut-être modifier le nom du projet. Je vais donc accéder à ce menu déroulant, le renommer, et je l' appellerai Control A. Supprimez-le , AI finance, et je le renommerai C'est le nom de cette équipe en particulier. Permettez-moi d'ajouter le mot équipe. L'équipe est là. Nous y voilà. Si nous cliquons sur ce menu déroulant ici, vous pouvez également créer une autre équipe Peut-être avez-vous une équipe de fitness, une équipe d'applications de fitness. Vous avez donc une autre équipe qui travaille sur une application de fitness, et vous pouvez choisir de collaborer avec d' autres personnes ou de skier pour le moment. Choisissez Starter. Et maintenant, votre équipe interne de l'application Fitness. Cliquez dans ce menu déroulant, vous pouvez revenir à AI Finance ou créer une autre équipe Je veux donc revenir à AI Finance. Nous y voilà. Et chaque équipe aura un projet. L'équipe d'AI Finance a donc un projet. Mais chaque projet peut comporter trois fichiers de conception. Comme vous pouvez le constater, nous avons ce fichier original. Je peux en ajouter un autre, un autre. Mais si je passe à la quatrième, on me demandera de passer à la version supérieure. Alors permettez-moi de double-cliquer dessus. Et appelez-la peut-être application Web AI Finance. Revenons donc aux fichiers. Nous sommes donc dans le projet d'équipe, nous pouvons renommer le projet Ce projet d'équipe ici est le suivant : si je clique sur le menu déroulant et que je sélectionne simplement l'équipe financière de l'IA, est-ce que ce projet d'équipe contient les trois fichiers de conception que nous sommes sur le point de créer ? Si je ne me trompe pas, je peux le renommer en fichiers de conception financière Désolée pour ça. Fichiers de conception AI Finance. Nous y voilà donc. Maintenant, n'oubliez pas que nous avons créé un fichier appelé AI Finance Web App. C'est peut-être le fichier que nous utilisons pour concevoir la version de l'application Web de celui-ci. Maintenant, si j'en ajoute un autre, souvenez-vous que nous sommes dans le projet AI Design Files. Celle-ci peut être appelée application mobile AI Finance. Revenons-en aux fichiers. Maintenant, dès que nous quittons un fichier de conception, dès que nous quittons l'éditeur, nous sommes redirigés vers un projet. Et n'oubliez pas que nous n'avons qu' un seul projet pour chaque équipe. Nous sommes donc actuellement dans le projet de fichiers AI Finance Design. Laissez-moi simplement appeler ce projet. Projet de conception financière par IA. Mais nous pouvons également faire partie de l'équipe qui gère ce projet et tous les autres projets qu'il contient si nous avons souscrit au plan payant. Si je fais partie de l'équipe AI Finance, tous les projets que nous avons ici seront répertoriés dans l'équipe. Mais n'oubliez pas que dans chaque équipe, si nous utilisons le plan gratuit, nous ne pouvons avoir qu'un seul projet. Maintenant, lorsque nous sommes dans un projet, ce projet qui fait actuellement partie de l'équipe financière d'AI, pour voir tout ce qui se trouve dans le projet, il suffit de cliquer dessus. Nous faisons maintenant partie du projet qui fait partie de l'équipe. Maintenant, dans ce projet, n'oubliez pas que nous avons deux fichiers de conception. Nous pouvons ajouter un autre fichier de conception. Maintenant, c'est le troisième. Supposons que nous ayons également une version Web de notre application, site Web I Finance. C'est à titre informatif, et nous voulons faire connaître notre application aux gens. Nous avons maintenant trois fichiers ici, site Web AI Finance, l'application mobile AI Finance, l'application Web AI Finance. Si nous essayons d'ajouter un fichier de conception, le message suivant s'affichera ici pour effectuer une mise à niveau, car nous ne pouvons avoir trois fichiers de conception dans que trois fichiers de conception dans un projet géré par une équipe. Maintenant, je pense que j'ai créé quelque chose ici pour nous aider avec la hiérarchie. Permettez-moi d'ouvrir Adobe Illustrator très rapidement. Et nous y voilà. Nous n'avons qu'une seule équipe. Par exemple, nous avons cette équipe financière basée sur l'IA, et l'équipe ne peut avoir qu' un seul projet si nous utilisons le plan gratuit. Une équipe ne peut avoir qu'un seul projet. Si nous voulons un projet supplémentaire, nous devons opter pour le plan professionnel payant. Une équipe ne peut avoir qu'un seul projet. Une équipe, l' équipe financière de l'IA, a un projet, savoir le projet de conception de l'IA. Permettez-moi de vous présenter l'équipe elle-même. Il n'a qu'un seul projet appelé AI Finance Design Project. Si nous voulons ajouter des projets supplémentaires, nous devrons passer au plan payant. Une équipe a un projet. Mais vous pouvez créer plusieurs équipes. Nous avons une équipe de Fitness App qui a la même hiérarchie. Si nous passons à cela, cela signifie qu'il s'agit d'un projet que nous n'avons pas renommé et que le projet ne contient pas encore de fichiers de conception. Nous pouvons également créer une troisième équipe. Peut-être avons-nous une équipe chargée de l'application Marketplace. Créez ça. Passons maintenant à autre chose. Comme vous pouvez le constater, nous avons trois équipes ce jour et vous pouvez continuer à créer des équipes. Permettez-moi de revenir à la finance par IA. O AI Finance Team Team a un projet, un projet gratuit appelé AI Finance Design Project, et chaque projet peut avoir trois fichiers de conception. Ce projet de conception d'IA comporte trois fichiers de conception. Si nous en voulons un de plus, nous devons également payer trois fichiers Figma Design et FIJ Maintenant, une fois que nous sommes dans un fichier de conception, nous avons également accès à trois pages, mais je n'en utilise jamais plus d' une, d'ailleurs. Si, par exemple, j' ouvre l'application mobile, double-cliquez dessus, sur le fichier de conception de l'application mobile. Nous en sommes à la première page en ce moment. Si nous voulons des pages supplémentaires, nous pouvons venir ici. Nous en sommes à la première page. Je peux ajouter une page supplémentaire, page deux, entrer, page trois, entrer Si j'essaie d'ajouter une page supplémentaire, je ne peux pas l'obtenir. J'utilise donc généralement une seule page. Permettez-moi de supprimer cela, et il ne me reste plus que cette seule page. Laisse-moi résumer ça. C'est ici que je peux maintenant venir et commencer à ajouter des couches d'éléments dans cette première page. Pour moi, c'est généralement largement suffisant pour mon projet, et vous pourrez le constater. Mais pour le moment, je voulais que nous examinions rapidement la hiérarchie et la façon dont les projets, les fichiers et les pages sont liés. Nous n'allons pas toucher à la confiture de figues car c'est un plat complet à part entière. Je le ferai peut-être plus tard. le moment, nous nous concentrons uniquement sur la conception de ce tableau de bord à l'aide de l'éditeur Figma Nous ne nous concentrons pas sur Fig Jam. dit, je pense que cette leçon est devenue beaucoup plus longue que ce à quoi je m'attendais. Mais je voulais vraiment le ramener chez moi. Je voulais que vous ayez cette précision, car c'est l'une des parties les plus confuses de Figma pour les débutants Ils ne comprennent pas vraiment ce qu'est un fichier, ce qu'est un projet, ce qu'est une équipe. Maintenant que vous avez compris tout cela, je pense que vous êtes prêt à commencer à créer notre tableau de bord. Dans la leçon suivante, nous allons voir comment créer la barre latérale. Je te verrai bientôt. 6. Ajouter un arrière-plan et un logo: Nous sommes maintenant prêts à commencer la conception proprement dite du tableau de bord, et nous disons que nous allons commencer par la barre latérale. Comme vous pouvez le constater, la première chose à faire est d'importer le logo. Alors, pour en revenir à notre espace de travail, où est-il ? Nous y voilà. Nous travaillons donc actuellement sur la version Web de notre application. Je vais donc double-cliquer dessus et nous y voilà. La première chose que nous voulons faire est créer l'écran réel. Pour ce faire, je vais sélectionner cet outil et une fois que je l'ai sélectionné, il révélera ici plusieurs modèles que nous pourrons utiliser rapidement. Comme il s'agit d'un ordinateur de bureau, je souhaite sélectionner, laisser le téléphone réduire et agrandir le bureau. Ensuite, je choisirai le Macbook Pro 16 pouces. Ou choisissons-le simplement. Nous y voilà. Bien sûr, comme vous pouvez le constater, si je sélectionne à nouveau cet outil, si vous souhaitez concevoir pour les téléphones, vous pouvez choisir le téléphone que vous voulez ici. Cela dit, la prochaine chose que nous voulons faire, permettez-moi de revenir à notre référence. Je voudrais ajouter cette ligne floue ici. Tout d'abord, ajoutons le fond. Pour revenir en arrière, je vais venir ici et sélectionner l'outil rectangle. Si vous ne voyez pas l'outil rectangulaire, cliquez sur le menu déroulant et sélectionnez-le dans la liste. Ensuite, je vais simplement faire glisser et couvrir tout l' écran avec. Ou cadre. Sur ce, je veux sélectionner une couleur très foncée. Tout d'abord, passons au bleu. Disons ce bleu, puis peut-être ce bleu foncé comme ça. Je le fais juste en freestyle, mais pour toi, tu dois travailler avec des codes couleurs spécifiques Voici le code couleur. Si vous souhaitez utiliser les couleurs que je sélectionne. Allons l'assombrir jusqu'à ce point. C'est le code couleur. Maintenant, laissez-moi sélectionner ce menu déroulant et choisir une ligne. Sélectionnez cette option pour le limiter uniquement au haut et au bas, sans le déplacer de gauche à droite Vous pouvez maintenir la touche Shift enfoncée. Cela signifie que vous ne vous déplacerez que vers le haut et vers le bas sur une ligne verticale à la vitesse de l'arche. Et nous y voilà. Je souhaite sélectionner la ligne elle-même et sélectionner la couleur du trait. Je voudrais passer à ceci et le faire glisser peut-être jusqu'à ce point. Juste pour être sûr qu'il fasse nuit. Je pense que c'est un bon endroit. Maintenant, pour importer le logo, je vais cliquer sur cette image de fichier dans le menu déroulant Comme vous pouvez le constater, nous avons un raccourci Control Shift K. Je peux simplement cliquer n'importe où ici, puis cliquer sur Control Shift K. Cela ouvre l'explorateur et je peux accéder directement à l'endroit où se trouvent ces éléments. J'ai les actifs de ce polo call. Nous avons le logo ici si vous souhaitez utiliser ce logo en cliquant n'importe où et en le faisant glisser Je placerai le logo ici. Je vais donc maintenir la touche Maj enfoncée , puis sélectionner l'un des coins et le faire glisser pour le redimensionner Si vous ne maintenez pas la touche Maj enfoncée, le cadre se déplacera de tous les côtés, mais si vous maintenez la touche Maj enfoncée, elle ne bougera que proportionnellement N'oubliez pas de contrôler la touche K, double-cliquer, de sélectionner n'importe où et de faire glisser le pointeur pour importer. Nous y voilà donc. Je pense que nous allons arrêter cette leçon ici. Nous avons appris à créer l'arrière-plan, ajouter cette ligne, à changer les couleurs et à importer une image. Il en va de même pour importer tout autre type d'image que vous souhaitez importer. Alors arrêtons-nous là pour le moment. Dans la leçon suivante, nous allons voir comment créer un bouton. Je te verrai donc bientôt. 7. Créer les buttons de la barre latérale: Bon retour. Maintenant que nous avons créé un arrière-plan et ajouté le logo, il est temps de créer les boutons. Permettez-moi simplement de zoomer en maintenant la touche Ctrl enfoncée et en faisant défiler la souris avec la molette de la souris Maintenez ensuite la molette de la souris enfoncée seule. Je peux le faire glisser et le placer au milieu pour qu'on puisse le voir. Maintenant, vous remarquerez ici que nous avons quelques textes et une icône. Et bien sûr, nous avons l'arrière-plan du bouton. Je reviens ici. Maintenez la touche Ctrl enfoncée et faites défiler l'écran avec la molette de la souris Lâchez le bouton de contrôle, maintenez la molette de la souris enfoncée et faites glisser le pointeur. Je veux venir ici et sélectionner cet outil rectangulaire et glisser-déposer et glisser-relâcher à cet endroit. Maintenant, vous remarquerez qu'il a des angles vifs. Pour lui donner des coins arrondis, on peut cliquer ici. Et donnez-lui peut-être dix entrées, et je pense que c'est un bon bouton aux coins arrondis. Maintenant, bien sûr, sur notre plan de référence ici, c'est plus clair que l'arrière-plan. En sélectionnant cette option, nous irons ici sur le terrain. Sélectionnez l'arrière-plan. Je pense que c'est la couleur de fond que nous sélectionnons. Non, c'est la couleur de fond parce que maintenant nous pouvons la voir, mais maintenant je veux la rendre plus claire. Peut-être jusqu'à ce point. Nous essayons juste de jouer avec les couleurs. Mais n'oubliez pas que s'il s'agit d'une véritable marque sur laquelle vous travaillez, vous devez utiliser les couleurs de la marque. Soyez créatifs avec eux. Je crois que j'aime bien ça. La prochaine chose que je veux faire est sélectionner le texte et de cliquer n'importe où, pas nécessairement à l'intérieur du bouton. Je peux également cliquer ici et saisir un aperçu. Cliquez à l'extérieur ou n'importe où ici. Ensuite, sélectionnez-le. Faisons en sorte qu'il soit en taille 16 et que le texte soit en taille 16, comme ça. Vous pouvez modifier la police si vous le souhaitez. Pour le moment, c'est ter. Nous pouvons peut-être sélectionner Monat Enter. Nous pouvons modifier le poids afin que je puisse sélectionner le gras. Allons-y. Maintenant, la prochaine chose que nous voulons ajouter est l'icône. revenant en arrière, vous remarquerez que j'avais déjà ouvert un onglet pour les icônes vectorielles, appelé icône plate ou icône plate, selon la façon dont vous voulez le prononcer. Je vais donc taper ce que nous avons ici. Analytics, par exemple, entrez. C'est bon. Nous y voilà donc. J'ai ces statistiques ici, et je suis déjà connecté. Si vous n'êtes pas connecté, vous ne pourrez pas modifier les icônes avant de les télécharger. Si je sélectionne l'icône elle-même, l' option permettant de modifier l'icône s'affichera. Je vais cliquer sur l'icône d'édition. Lorsque cette option est sélectionnée, je clique sur la couleur et je la change en blanc. Téléchargez-le ensuite. Je vais sélectionner une taille de 64 pixels. Téléchargement gratuit Maintenant que nous l'avons téléchargé. Permettez-moi de revenir ici. Nous l'avons téléchargé. Je peux le glisser-déposer ici. Maintenez la touche Maj enfoncée, puis sélectionnez un coin ici et redimensionnez-le Placez-le là. Vous pouvez également venir ici et cliquer sur cette icône juste ici pour l'afficher dans le dossier. Il s'ouvrira là où il se trouve dans vos téléchargements. Ensuite, vous pouvez le glisser-déposer dedans. Supprimez-le. Vous pouvez également contrôler le shift K, n'oubliez pas. Accédez ensuite aux téléchargements. Double-cliquez dessus et faites glisser le en maintenant la touche Shift enfoncée pour le redimensionner proportionnellement Ce sont toutes des manières différentes de le faire. Allons-y. Permettez-moi juste le positionner. Maintenant, une façon de positionner des éléments dans votre illustration consiste à sélectionner peut-être le texte, l'icône, puis enfin le bouton. Maintenant, lorsque nous alignons les éléments, ceux-ci seront alignés par rapport au bouton. Si je viens ici pour aligner les centres verticaux et que je clique dessus, comme vous l'avez vu, ils se déplacent par rapport à l' arrière-plan du bouton lui-même. Il n'a pas été déplacé, mais tout le reste a été déplacé car c'est le dernier élément que j'ai sélectionné. Donc, encore une fois, si je le place là et que je veux qu'il soit verticalement au centre, je peux le sélectionner, puis le bouton lui-même, l'élément sur lequel je veux que l'autre élément soit aligné. Cliquez ensuite sur cet alignement vertical des centres, et maintenant c'est au centre du dernier élément que nous avons sélectionné. Sur cette base, je vais sélectionner ces trois. Contrôlez G, regroupez-les et renommez-les en bouton 1. Maintenant, si je maintenais la touche Alt enfoncée, comme vous pouvez le voir, le curseur de la souris semble être dupliqué, ce qui indique que nous sommes sur le point de dupliquer ce bouton Et maintenez la touche Shift enfoncée pour la contraindre afin qu'elle ne se déplace pas vers la gauche ou vers la droite Maintenez la touche Shift enfoncée, relâchez-la juste là, puis contrôlez D pour continuer à la dupliquer Contrôle D, et maintenant nous avons plusieurs boutons. Je vais maintenant répéter le processus pour ces autres boutons, le même processus d' édition de ce texte, je vais sélectionner ce texte, modifier ces deux ordres. Ensuite, je vais passer à Flat icon ou FlatCon, et peut-être rechercher des commandes Permettez-moi simplement de rechercher des commandes. Recherchez simplement de belles icônes créatives. Montrez-moi les ventes. C'est bon. Alors laisse-moi choisir ça. Modifier l'icône. Lorsque cette option est sélectionnée, White télécharge le téléchargement gratuit au format PNG 64. Il est téléchargé. Revenez ici. Zoomez. Va ici, glisse-le et dépose-le. Maintenez la touche Shift enfoncée, prenez un virage. Sélectionnez-le, supprimez-le. Désormais, lorsque vous avez un groupe et que vous souhaitez sélectionner un élément au sein de ce groupe, maintenez la touche Ctrl enfoncée, vous pouvez sélectionner un seul élément au sein de n'importe quel groupe. Si vous relâchez le contrôle, vous ne pourrez pas sélectionner les éléments du groupe, sauf si vous double-cliquez dessus. Maintenant, je veux le repositionner , maintenez la touche Shift enfoncée. Et je vais laisser ça là. Je vais donc répéter le même processus pour le reste des boutons, et je vous verrai une fois que j'aurai terminé. Maintenant, juste au cas où vous constateriez qu' un article ne fait pas partie du groupe auquel vous vouliez appartenir. Par exemple, cette icône n'est plus à l'intérieur de ce groupe, elle est à l'extérieur. Si je sélectionne ce groupe, c'est le bouton 3, et l'icône est là-haut. Voici le groupe, et voici le portefeuille. Je peux simplement faire glisser le portefeuille dans le groupe trois, juste comme ça, le déposer dedans. Maintenant, si je sélectionne le groupe, chaque groupe unique. Alors, messages, passons aux messages. Laisse-moi juste faire glisser ça vers le bas comme ça. Changez cela en paramètres. Sélectionnez l' outil de sélection. Alors je vais me lancer. Sélectionnez-le. Modifiez l'icône. Changez la couleur en blanc, téléchargez, PNG, 64, téléchargement gratuit. Retournez ici. Faites glisser et maintenez la touche Shift enfoncée Bien sûr, c'est à l'extérieur, c'est le bouton numéro six, donc il est automatiquement à l'intérieur, donc pas de problème. Maintenez la touche Ctrl enfoncée pour sélectionner cette icône, supprimez-la, maintenez la touche Ctrl enfoncée pour la sélectionner. Mettons-le là. Peut-être maintenez la touche Shift enfoncée et sélectionnez-la. Il est correctement aligné. Je vais juste le faire glisser. J'espère que vous avez suivi le processus que nous avons fait avec le premier bouton et que vous avez maintenant quelques boutons. Je pense que c'est la fin de cette leçon. Dans la leçon suivante, nous allons voir comment créer la barre de recherche. Je te verrai bientôt. 8. Créer la barre de recherche: Bon retour. Il est maintenant temps de créer la barre de recherche. Nous allons utiliser les mêmes principes que ceux que nous avons utilisés ici. Revenons à notre éditeur. Nous y voilà. La première chose à faire est de sélectionner cet outil rectangulaire. Je vais juste faire glisser et peut-être relâcher quand j' arriverai à ce point. Maintenant, bien sûr, je dois lui donner des coins arrondis. Je vais le sélectionner et lui donner 50 pour assurer qu'il est complètement arrondi. Comme vous pouvez le constater, nous avons cette icône de recherche. Laisse-moi juste zoomer, chercher. Je vais donc passer à l'icône plate. Recherchez ensuite Search Enter. Et c'est parti. Nous avons tellement d'icônes d'objectifs ici. Allons-y. Laisse-moi choisir celui-ci. Je vais cliquer sur l'icône Eddie. Changez ça en Non, laissez-moi le rendre grisâtre. Puis 64 téléchargements gratuits. Retourner ici. En fait, permettez-moi de fermer toutes les autres comme ça. Maintenant, pour y revenir, je vais passer aux téléchargements et le faire glisser ici. Maintenant, comme vous pouvez le voir, les deux couleurs sont presque similaires, vous pouvez donc voir l'objectif. Je vais sélectionner la barre Sarge et la rendre peut-être plus foncée, légèrement plus foncée, juste comme ça Vous pouvez maintenant voir l'objectif, et je vais maintenir la touche Maj enfoncée pour le redimensionner Je pourrais même le mettre à l'autre bout parce que la courbe est du côté gauche sur le côté droit, juste comme ça. Enregistrer. Et j'ai oublié d' allumer ma lumière ici. J'espère donc que tu peux me voir clairement maintenant. Qu'avons-nous d'autre ici ? Nous avons ces boutons, notifications, mode sombre et utilisateur. Donc, je reviens ici. Notifications. Laissez-moi sélectionner ce changement de couleur. Téléchargez PNG 64 pixels, téléchargement gratuit. Nous avons besoin d'entrer en mode sombre. Nous pouvons sélectionner peut-être ceci ou peut-être ceci, icône d'édition. Passons au blanc, au téléchargement, au PNG, au téléchargement gratuit, et enfin, euh. Je vais sélectionner telle ou telle icône pour la remplacer par du blanc. Téléchargez ce téléchargement gratuit au format PNG 64. Maintenant, revenons ici, notification. Et fais-le. Notification, déposez-la là, luminosité et contraste et utilisateur. Sélectionnez les trois en maintenant la touche Shift enfoncée pour les redimensionner. Maintenant, je vais les faire glisser et les placer. En fait, maintenant que j'ai sélectionné les trois, je peux les aligner verticalement les uns par rapport aux autres. Je pense que nous commençons maintenant à avoir un bon design. Je pense que pour le moment, nous allons en rester là. Regardons ce que nous avons à faire ensuite. Dans la leçon suivante, nous allons voir comment créer ces cartes. Nous allons commencer par un texte ici , puis créer une carte. Je te verrai bientôt. 9. Carte de gains totaux: Il est maintenant temps de commencer à créer les parties principales du tableau de bord, savoir les cartes. Mais avant cela, ajoutons d' abord ce texte. Je vais maintenir la touche Ctrl enfoncée pour sélectionner ce texte, puis cliquer trois fois sur Copier. Ensuite, je vais revenir à mon éditeur ici même. Sélectionnez le texte à. Cliquez n'importe où dedans , puis contrôlez V pour coller. C'est bon. Je vais donc le positionner juste là. Et je vais cliquer trois fois ici, copier ce Hall ici, et faire glisser le double-clic sur Coller. Permettez-moi d'utiliser les flèches de mon clavier. Maintenant, pour vous, vous allez taper. Permettez-moi de sélectionner T, puis de taper santé financière. Statez, échappez ou cliquez n'importe où à l'extérieur. Vous pouvez maintenant passer au texte. Vous pouvez le remplacer par Monsat ou par n'importe quel autre téléphone de votre choix Ensuite, vous pouvez augmenter la taille du téléphone. Peut-être disons 36, et peut-être disons que le poids est noir. Je vous montre juste comment le faire si vous ne le copiez-collez pas depuis quelque part Voici également un aperçu de votre situation financière ce mois-ci. En cliquant n'importe où à l'extérieur. Maintenant que nous l'avons, je peux peut-être le changer pour la taille 12. Disons 14, et revenons à la normale. En gros, c'est comme ça qu'il faut procéder. Mais maintenant, laissez-moi simplement le supprimer car j'ai déjà mon texte. Nous voulons maintenant créer cette carte. Avant cela, ajoutons ce bouton. Je vais simplement le sélectionner, le maintenir enfoncé et le faire glisser. Jusqu'à cette fin. Ensuite, je vais maintenir la touche Ctrl enfoncée pour sélectionner cet arrière-plan lui-même. Maintenant qu'il est sélectionné, je peux appuyer sur I pour faire apparaître l'outil compte-gouttes et je peux survoler cette orange, qui appliquera cette couleur orange à l'article actuellement Alors cliquez dessus. Maintenant, notre bouton a cette couleur. Cette méthode consiste à créer de nouveaux produits. Créez de nouveaux produits. Cliquez n'importe où ici. Maintenez la touche Ctrl enfoncée pour sélectionner le bouton, retirez-la, maintenez la touche Ctrl enfoncée pour la sélectionner. Et ne vous inquiétez pas pour l'organisation. Je sais que tout est désorganisé ici, mais c'est une leçon en soi. Nous allons tout organiser car nous devrons tout regrouper en conséquence. La prochaine chose que nous voulons faire est de créer cette carte ici. Je vais juste appuyer sur pour le dupliquer et me laisser le placer ici. En fait, je vais le dissocier pour le moment, cliquer avec le bouton droit de la souris sur le groupe, et maintenant il n'est plus groupé Je veux redimensionner ce 2255 en fait, laissez-moi le faire manuellement La largeur est de 259, la hauteur est de 252. Faisons en sorte que ce soit 260. Par 26260. Maintenant c'est carré Je veux le sélectionner et appuyer sur I pour faire apparaître le compte-gouttes , puis le sélectionner Cliquez ensuite à l'extérieur. Cela lui donnera la même couleur que les boutons. Créons le montant, copiez-le. Vous pouvez également simplement le faire glisser, sélectionner et peut-être le mettre de côté. Disons 43 210 à l'extérieur, cliquez. Mets ça là. Double-cliquez sur ce bouton. Je peux peut-être appeler ce signe du dollar, cliquer à l'extérieur, le glisser-déposer quelque part ici. Ou nous devons l'élargir légèrement. Nous n'avons pas nécessairement besoin de l'avoir sous forme de rectangle. Total des revenus. Je vais simplement faire glisser non, sélectionner ceci. Total des revenus. Juste comme ça. Nous avons maintenant ces trois : les cellules de boutique, les publicités YouTube, les publicités Google. Nous pouvons sélectionner cet outil. Nous pouvons sélectionner ce rectangle, créer de petits rectangles en maintenant la touche Maj enfoncée, je veux entrer par le contrôle et la molette de la souris Alors donnons-leur un coin arrondi de peut-être trois, juste comme ça. Atteignez et faites glisser ce bouton. Ventes en boutique. Publicités YouTube Publicités Google. Cliquez donc n'importe où à l'extérieur. Sélectionnez ceci et cela. Avant cela, faisons en sorte que cela soit régulier. Faisons en sorte que ce soit la taille. Sélectionnez Ajouter puis contrôlez D pour répéter le même mouvement. Annonces Google Ads sur YouTube. C'est le revenu que nous avons tiré de tout cela. Maintenant, changeons de couleur. Ça peut lui donner un gris clair. Passons au bleu, puis donnons-lui ce bleu clair. Donnons-lui peut-être une couleur rouge. Ou devrais-je dire couleur orange ? Oui, en fait, faisons-en sorte que je fasse apparaître le compte-gouttes deux pendant que celui-ci est sélectionné, puis que je le touche Et puis nous avons aussi un beau vert. Donc, en l'ouvrant, je trouve que c'est un beau vert. Maintenant, dans le plan de référence ici, si je maintenais la touche Ctrl enfoncée et que je la sélectionne, comme vous pouvez le voir, il s'agit de l'icône du graphique Pi. Donc, en revenant ici, je peux passer à l'icône plate. Carte Pi, carte Pi, entrez. Maintenant, je pense que c'est ça, mais je veux quelque chose de plus simple. Laisse-moi juste sélectionner ça. Modifier l'icône, et maintenant nous avons trois couleurs. Je peux remplacer cette couleur par cette couleur. Permettez-moi de revenir ici, en sélectionnant ceci, en copiant cela. Contrôlez C pour copier ce code couleur, retournez ici, collez-le là. Oh, nous sommes censés entrer ici. Sélectionnez donc cette orange. Copiez ça, passez ici. C'est la couleur bleue. Double-cliquez dessus, collez-le dedans, et maintenant c'est orange. Enfin, nous avons ce vert, double-cliquez dessus, contrôlez C, sélectionnez-le. Entrez ici, double-cliquez dessus, entrez. Maintenant, c'est ce que nous avons. Télécharger, PNG. Téléchargeons 512. Téléchargement gratuit, et c'est parti. Maintenant, en venant ici, nous pouvons le glisser-déposer ici. Maintenez la touche Shift enfoncée, redimensionnez-la. Et maintenant, chaque portion du Pi est représentée par ces valeurs ici. Permettez-moi de maintenir la touche Maj enfoncée et de toutes les sélectionner, maintenez la touche Maj enfoncée pour les redimensionner. Faites-les glisser et placez-les là. Sélectionnez le texte lui-même, et donnons-lui peut-être la taille 10 ou 11. Nous y voilà. Maintenant, laissez-moi également maintenir la touche Ctrl enfoncée et zoomer, en maintenant ceci et Shift, puis cela. Alignons cela sur le petit carré. Maintenez ça, puis changez de position. Alignez-le, sélectionnez-le, maintenez la touche Maj enfoncée. Alignez ça. Maintenant, sélectionnez ces trois points et faites glisser le pointeur vers la droite. Maintenez la touche Shift enfoncée pour vous déplacer en ligne droite. Passons maintenant de l'alignement à gauche sur le texte à l'alignement par écriture. Permettez-moi de sélectionner ceci, puis ceci, puis ceci, et de les aligner vers la droite par rapport à cela, puis de les faire glisser vers le haut peut-être jusqu'à ce point. Parce que nous voulons ajouter ces chiffres, 12,05 3 000$ et quelque chose comme ça Signe du dollar 3 522, signe du dollar 10 320 et signe du dollar Nous pouvons également sélectionner le texte de la figure elle-même et contrôler B pour le mettre en gras. Contrôlez B ou rendez-vous directement ici pour le rendre noir. Mais c'est audacieux, encore plus audacieux. En train de changer ici. Ils sont un peu pâles, alors je vais les sélectionner tous les trois, passer à Feel et les faire glisser jusqu'à ce point C'est également faible. Je vais peut-être le faire glisser jusqu'à ce point. Maintenant, vous remarquerez que nous devons faire quelques arrangements ici pour le rendre un peu plus attrayant et organisé. Mais dans l'ensemble, j'adore ce que nous avons jusqu'à présent. Sauvegardez ça. Maintenant, poussons cela vers l'intérieur en même temps que tout cela. Enfin, nous devons ajouter cet indicateur de performance. Donc, bien sûr, nous pouvons simplement le faire glisser. Tiens bon, fais glisser ça. Alors redimensionnons-le. 3,8 en hausse de 3,8 ce mois-ci. Maintenant, c'est derrière cette boîte. Je peux donc simplement faire glisser et le mettre dessus. Peut-être quelque part là-bas. Il n'est toujours pas en haut, donc je vais continuer à le faire glisser vers le haut Mettons-le juste là. U de 3,5 %. Cliquez à l'extérieur. Je vais le rendre vert. Je vais donc appuyer sur l'œil pendant que c' est sélectionné pour faire apparaître le compte-gouttes, juste comme ça, puis sur le contrôle B, pour le mettre en gras Et bien sûr, nous devons maintenant trouver cette flèche. Donc je vais juste aller ici, fermer ça, puis faire une flèche. J'aime ça, sélectionnez-le , modifiez l'icône. Remplacez-le par ce vert. En revenant ici, je vais sélectionner. Non Revenons à nos œuvres d'art, car nous voulons avoir ce vert précis. Contrôlez C pour le copier. Retournez ici, double-cliquez sur ce collage. Téléchargez PNG 64, téléchargement gratuit. Nous y voilà. Retournez ici, je vais le glisser-déposer ici. Maintenez la touche Shift enfoncée. Faites-le ensuite pivoter en maintenant la touche Shift enfoncée pour effectuer des incréments d'angle de 45 Et pour ce faire, maintenez la touche Shift enfoncée et commencez à faire pivoter. Mettons-le là. Et voilà. Maintenant, en fait, je vais tout sélectionner ici. Voyons voir. Oui, tout est sélectionné, Ctrl G. Ensuite, je vais sélectionner le groupe pendant qu'il est encore sélectionné, je vais tout déplacer vers le bas et sélectionner la carte qui est censée le contenir, puis maintenant je vais tout aligner au centre de celui-ci. Nous y voilà. Nous avons donc notre première carte. 10. Assignment - Le reste des cartes: Dans la leçon précédente, nous avons créé cette carte, et je vous laisse le soin de créer ces trois cartes, une, deux , trois, et comme vous pouvez le voir, celle-ci est une barre comme celle-ci, de couleur verte. Si je maintenais la touche Ctrl enfoncée pour le sélectionner, il a cette couleur bleu clair, mais il a toujours des coins arrondis et tout ça. Maintenant, je voulais juste apporter des précisions supplémentaires à ce . Si je zoome, comme vous pouvez le voir, voici un rectangle aux coins arrondis, mais au niveau trois. C'est pourquoi ils ne se réunissent pas au centre comme ça. Donc, revenons au niveau trois. Le même cas s'applique à cela. Mais maintenant, cela n'a pas de couleur de champ, il a une couleur de trait. Et je l'ai essentiellement placé dedans pour créer cet effet de niveaux. J'espère que j'ai du sens. Et pour ce dernier, j'ai fait la même chose qu'ici. Je suis allée sur Flood Icone et j'ai cherché ce que c'est, d'ailleurs, Fecast Allons voir si nous pouvons obtenir des prévisions. Qu'est-ce que nous obtenons ? C'est bon. Maintenant, ce que nous recevons, ce sont des prévisions météorologiques. Je pense donc aux prévisions de ventes. Oui. Vous voyez des documents comme ceux-ci pour représenter les paiements en attente. Mais comme vous pouvez le voir, cette section est assez similaire à celle-ci, et c'est quelque chose que vous pouvez faire très facilement. Je voulais juste vous aider à apporter cette précision afin que vous ne soyez pas coincé. Voyons ce que tu vas pouvoir trouver. N'hésitez pas non plus à créer quelque chose de votre choix. Il n'est pas nécessaire de créer ces barres ou celles-ci ici. Voyons si vous pouvez faire preuve de créativité et concevoir quelque chose de différent pour les cartes. Dans la leçon suivante, nous allons voir comment ajouter ces diagrammes à barres et ces graphiques. Je te verrai donc bientôt. 11. Ajouter des graphiques et des graphiques: Il est maintenant temps de travailler sur cette carte ici et probablement sur celle-ci. Revenons à nos œuvres d'art. Je veux sélectionner ce groupe et la carte qui les contient, et en fait, les regrouper tous ensemble. Contrôle G. Maintenant, c'est une seule carte que je peux faire glisser, ou il y a ce chiffre ici que je tiens également enfoncé pour sélectionner les deux, Control G. A. Je ne peux pas le mettre dedans parce qu' il se trouve dans un groupe distinct. Permettez-moi tout d'abord de le dissocier. Qu'est-ce qu'il y a là-dedans ? Permettez-moi de le dissocier Nous avons maintenant 3,5. Permettez-moi de le faire glisser dans le groupe 3. Maintenant, il fait partie de ce groupe. C'est bon. Maintenant, laissez-moi maintenir la touche enfoncée et faire glisser peut-être jusqu'à un espace de 25. Et faites le même contrôle D. Maintenant, l'espacement est le même partout. Mais bien sûr, je vais développer cela. Mais avant cela, maintenez les touches Shift et Shift enfoncées et faites glisser à nouveau cet espacement de 25, relâchez-le juste là Maintenant, supprimez-le, puis dissociez-le parce que je veux le grouper à nouveau, et le dissocier à nouveau Je veux les séparer en individus Merci. Elements, laissez-moi supprimer tout ça. Revenons-en à cela. Il en a toujours, donc je vais le garder. Mais ce que je voulais faire, c'est redimensionner pour m'assurer qu'il atteigne ce point Mais je voudrais l'étendre un peu pour m' assurer que le rythme est le même ici Cela signifie que nous allons déplacer le bouton. Sélectionnez le bouton et maintenez la touche Maj enfoncée, sélectionnez-le, puis alignez le bouton vers la droite en fonction de celui-ci. même cas s'applique à ceux-ci, maintenez la touche g enfoncée pour les regrouper. Maintenez ensuite la touche Shift et alignez-les sur le bouton comme ça. Maintenant, pour en revenir à cela, c'est dans le bon côté. Maintenez donc la touche Ctrl enfoncée pour zoomer avec la molette de la souris. Tout d'abord, permettez-moi de regrouper cela. Sélectionnez ça, cela, puis ce qui les contient et alignez-les comme ça. Contrôlez ensuite G pour les regrouper. Maintenant, il s'agit d'un seul groupe. Pendant que cette option est sélectionnée, je vais également sélectionner cette commande et cette commande G pour les regrouper. Maintenant, je peux les porter comme un seul groupe, juste comme ça. Je veux sélectionner ceci et maintenir le bouton enfoncé sur. Maintenant, ils sont derrière ça. Je vais donc les faire glisser vers le haut. Maintenez ensuite la touche Shift enfoncée. Non. Redimensionnons simplement Tout d'abord, qu'est-ce que cela dit ? Ventes de la semaine dernière. Ventes de la semaine dernière, et ça devrait être blanc. C'est ainsi que vous vous êtes comporté la semaine dernière. Très bien, juste comme ça. Séchons et mettons-le là. Maintenant, nous pouvons faire cette taille en utilisant la molette de la souris. Je veux dire, je peux utiliser les flèches du clavier. Je pense que 28 c'est bien. Baisse-le peut-être à 13. Maintenant, disons 12, puis poussez-le vers le haut, appuyez dessus vers le bas. Je pense que c'est une bonne position. En fait, appuyons cela vers le bas, juste pour l'aligner sur celui-ci. Maintenez la touche de contrôle enfoncée pour sélectionner la figurine elle-même. Sélectionnez le total des revenus, augmentez-le. Sélectionnez ce groupe, rapprochez-le du numéro. Nous y voilà. Sauvegardez ça. Maintenant, pour ajouter ces diagrammes et graphiques Pi, cliquez avec le bouton droit de la souris n'importe où ici. Survolez les plug-ins, gérez les plugins. Cela fera apparaître la fenêtre contextuelle des plugins. Là, nous pouvons rechercher le plugin que nous voulons. Tapons un graphique. Et je pense que c'est pour cela que nous avons besoin de graphiques. Par Sam Mason. Je vais cliquer. Permettez-moi juste de dire « Courez ». Oui, et c'est ça. Nous pouvons modifier le nombre de points de données. Je vais juste le laisser à dix heures. Nous pouvons décider si nous voulons que ce soit une dispersion, une aire ou une barre Pi D sur un graphique, je vais revenir à la ligne Nous pouvons changer la fourchette, peut-être 10 000. Cela passe à 10 000. Nous pouvons modifier la plage du jeu de données. Disons deux. En fait, en parlant de barre, laissez-moi le remplacer par barre, et je pourrai dire « ajouter un graphique ». Maintenant, il sera placé sur votre œuvre d'art, et si je zoome, vous remarquerez que le texte est noir et que ces lignes pointent vers le texte. Tout d'abord, et je ne pense pas que ce soit groupé. Si j'utilise la molette de la souris, la maintenais enfoncée pour la faire glisser, elle n'est pas groupée. Je vais m'arrêter. Tout d'abord, permettez-moi de zoomer avec le contrôle et la molette de la souris. Ensuite, je vais sélectionner le texte, cet autre texte. En fait, je n'ai pas besoin du réseau. Permettez-moi de sélectionner la grille et de la supprimer. Je n'en ai pas besoin. Maintenant, les textes, les autres textes et la barre. Maintenant, si je les fais glisser, il ne reste que les barres de la grille. Contrôlez G pour les regrouper. C'est bon. Maintenant, laissez-moi simplement le faire glisser et le mettre ici. Maintenez la touche Shift enfoncée pour la réduire. Maintenant, vous remarquerez que, parce que nous l'avons réduit, le texte s'est effondré. Je vais maintenir la touche Ctrl enfoncée pour sélectionner des textes individuels, pour sélectionner plusieurs textes ensemble. Je vais maintenir la touche Ctrl enfoncée et passer à la vitesse supérieure. Et je vais le retirer pour agrandir le porte-texte. Maintenez ensuite la touche Ctrl enfoncée et la touche Shift pour sélectionner à nouveau le texte. En fait, laissez-moi tout sélectionner comme ça. Changez ensuite la couleur en blanc. Je vais sélectionner en fait, laissez-moi le sélectionner. Maintenez le contrôle enfoncé. C'est une tâche un peu fastidieuse, mais nous devons le faire en maintenant la touche Ctrl enfoncée et en Shift pour sélectionner les différentes Permettez-moi de commencer par le haut, en contrôlant, et celui-ci à la fin, maintenez la touche Maj enfoncée et la touche Ctrl. Ensuite, sélectionnons ceux du milieu. Et celui-ci principal. Change ça en blanc. Répétons la même chose pour cela. Maintenez la touche Contrôle enfoncée. Contrôle du changement de vitesse. Je vais les sélectionner. Et je vais le remplacer par du blanc. Maintenant, pour cette couleur, la couleur bleue, je vais la sélectionner, puis maintenir la touche Ctrl Shift enfoncée. Appuyez sur la touche en forme d'œil du clavier pour faire apparaître le compte-gouttes et sélectionnez cette couleur pour plus d'uniformité Je pense que j'aime ce que nous avons jusqu'à présent. Voyons ce que nous avons d'autre. Trouvons ce type de graphique. Je vais cliquer avec le bouton droit sur les plug-ins. Nous avons maintenant des graphiques, car c'est l'un des derniers récemment utilisés. Donnons-en cinq. Donnons-lui trois points. Cachez la grille, et c'est parti. Ajoutez un graphique, et c'est le graphique que nous avons. Maintenant, je vais répéter le même processus. Assurez-vous de sélectionner tous les éléments du graphique. Je ne pense pas avoir oublié quoi que ce soit. Tout d'abord, laissez-moi sélectionner ceci. Si j'ai sélectionné avant de tout regrouper, j'ai maintenant la possibilité de changer la couleur différente. Je peux changer la couleur de remplissage en blanc, tout ce qui a une couleur de champ est blanc. Ensuite, passez de la couleur au blanc, tout ce qui a un trait. Le même cas s'applique à ce groupe. Couleur de remplissage blanc, couleur de trait blanc. Maintenant, je veux sélectionner ceci. C'est jaune, mais je veux que ce soit de cette couleur orange. Pour ce second, je veux que ce soit cette couleur bleutée. Nous y voilà. Maintenant, je peux le sélectionner. Contrôlez G pour le regrouper. Alors je pourrai le réduire. Je dois insister sur ce point. Laisse-moi juste annuler ça. Il y a cette coupure qui est en train de se produire. Je pense que je vais simplement l'étendre jusqu'à ce point. Je ne sais pas ce que c'est. Laisse-moi juste annuler ça. Faites-le ensuite glisser à nouveau. Permettez-moi de le mettre là, puis de le redimensionner pendant que nous y sommes encore Je ne sais pas pourquoi cela se produit. Mais c'est bon. Maintenant, maintenez la touche Ctrl enfoncée. Qu'est-ce que c'est ? Je ne sais pas ce que c'est. Je pense que c'est le clip situé en dehors du graphique. Mais honnêtement, je ne sais pas ce que c'est, mais cela ne nous empêchera pas de faire notre travail. Maintenir enfoncé. Permettez-moi simplement de le supprimer. Supprimez-le. Maintenez la touche Ctrl enfoncée et Shift pour les sélectionner. Je peux maintenant étendre cela. Nous y voilà. Contrôlez S pour enregistrer cela. Et maintenant, nous avons un joli tableau de bord. Maintenant, bien sûr, je viens de les dupliquer. Bien entendu, le vôtre doit être unique. Chacun d'entre eux doit être différent. J'aurais fait de même pour cette partie car il s'agit de trouver les bons graphiques. Et cela devrait être une zone et répéter la même chose. Mais je ne vais pas le faire parce que c' est quelque chose que tu peux faire toi-même. Mon objectif ici est de vous donner un bon guide à suivre et à créer votre propre version créative ou le tableau de bord. Ce que je vais faire, c'est sélectionner ceci, ceci et ces textes, et ceci. Enfin, cette commande G permet de tout regrouper. Maintenez ensuite la touche enfoncée pour le dupliquer. Ensuite, avec un espacement de 25, je vais le déposer là Et il semble que nous ne l'ayons pas vraiment regroupé parce que c' est dans un groupe différent, mais pas de problème. Nous allons faire un peu de ménage lorsque nous aurons tout organisé Je vais donc le faire glisser en maintenant la touche Alt enfoncée pour le placer là, et il me suffit de le modifier pour indiquer les ventes du mois dernier, mais je ne vais pas le faire. Dans la leçon suivante, apportons quelques touches finales en expliquant comment vous allez procéder. C'est tout pour le moment, et je vous verrai dans la prochaine leçon. 12. Assignment - Finaliser les cartes: Il est donc temps de passer à une autre mission, qui sera très simple et rapide. Maintenant, si vous regardez cette section ici, y trouverez les articles les plus récemment vendus dans votre inventaire, et vous remarquerez, bien sûr, que ce sont des icônes que j'ai téléchargées à partir d'une icône plate. Et c'est quelque chose que vous savez déjà, rendez-vous sur Flacon pour les télécharger. L'autre chose que vous remarquerez, c'est que ce titre et ce sous-titre sont assez similaires à ce que nous avons déjà ici C'est quelque chose que vous pouvez créer rapidement. Enfin, nous avons ces lignes carrées brisées ici. Il est très facile de créer un carré en ligne brisée. Tout ce que vous avez à faire, en fait, laissez-moi vous montrer très rapidement comment procéder. Pour en revenir à notre travail. Je vais maintenir la touche Ctrl enfoncée, puis la sélectionner, puis la déplacer vers l'extérieur et la faire glisser pour la dupliquer En fait, elle est groupée Permettez-moi de le regrouper. Groupe. Encore une fois, groupez, et maintenant c'est une carte individuelle, et maintenant c'est une carte individuelle. Tant que c'est sélectionné, je vais passer au stroke. Et ajoutez et maintenant il y a un trait. Ensuite, je vais soustraire le champ pour m'en débarrasser. Maintenant, si nous zoomons, vous remarquerez qu'il ne s'agit que d'un trait. Tant qu'il est encore sélectionné, je peux donner au trait cette couleur bleutée claire, juste comme ça Je peux également augmenter la largeur. Disons que je peux en donner quatre. Je peux choisir d'avoir le trait à l' intérieur, à l'extérieur ou au centre. Pour le moment, c'est à l'intérieur. On peut aussi le mettre à l'extérieur. Maintenant c'est à l'extérieur, et on peut le mettre au centre. Maintenant, si je vais dans ce menu ici, nous pouvons aller dans ce menu déroulant et le remplacer par d et cela devient un trait pointillé C'est ainsi que vous pouvez créer cela. Vous allez jouer avec ces paramètres et voir ce que nous pouvons vous proposer. Après avoir décrit tout ce que vous devez faire pour le créer, je pense que ce sera une tâche facile pour vous, et il devrait être très intéressant de voir ce que vous allez obtenir. C'est très facile à créer, il suffit de le dupliquer ou de le créer à partir d'ici, puis d'ajouter du texte, aller sur l'icône plate et de sélectionner un bouton fermé Comme vous pouvez le constater, cela est supprimé. Si vous passez à une icône plate, vous pouvez dire peut-être fermer parce que c'est une icône fermée, et nous y voilà. Prenez votre temps pour compléter cette carte, celle-ci et cette carte Upgrade Now, et je vous verrai dans la prochaine leçon, où nous parlerons de la façon tout organiser ici. Parce que si vous regardez ce que nous avons sur mon site Web de référence, sur mon design de référence, c'est en fait la référence. Si je résume cela, c'est que c'est très bien organisé, donc je vous verrai dans la prochaine leçon. 13. Organiser les composants: Bon retour. Il est maintenant temps d' organiser notre design ou notre dossier. Et en regardant notre dossier de conception de référence ici, comment je l'avais organisé. Comme vous pouvez le constater, nous avons la barre de recherche qui se trouve en haut. Nous avons la barre latérale, puis le contenu principal. Si je développe le contenu principal, il est également sous-classé en différentes sections. Lorsque je survole différentes parties, vous remarquerez que tout est très bien organisé, et je peux simplement venir porter, le mettre de côté ou cela et le mettre de côté C'est ce que nous allons faire dans le cadre de notre projet. Retourner ici. Maintenant, permettez-moi de m'en débarrasser. Maintenant, bien sûr, commençons par la barre de recherche. Il est composé de l'icône de recherche, puis de la barre de recherche elle-même. Je vais sélectionner les deux, puis contrôler G pour les regrouper. Maintenant, je peux les porter tous les deux et c' fait. Ceci est déjà groupé. N'oubliez pas que nous les avons sélectionnés tous les trois. Maintenant que ce groupe est sélectionné, je peux sélectionner cet autre groupe en maintenant la touche Maj enfoncée. En fait, ils ne sont pas alignés. Puisque j'ai sélectionné cette dernière option, nous pouvons aligner les trois sur celle-ci. Juste comme ça. Maintenant, si j'appuie sur Control G, nous formons un nouveau groupe appelé groupe 16 et je peux simplement tout emporter. Ce groupe 16 peut être appelé entrée dans la barre de recherche. Zoomez, maintenez la touche Ctrl enfoncée et faites défiler la molette de la souris Maintenant, nous avons également ces boutons. N'oubliez pas que nous avons regroupé tous les boutons, donc je peux les transporter juste pour confirmer que chacun d'entre eux est groupé. C'est bon. Je vais sélectionner ce bouton, maintenir la touche Maj enfoncée pour les sélectionner toutes avec le logo et cette ligne, puis je vais contrôler G pour les regrouper. Maintenant, si pour le moment je ne suis pas en mesure de tous les regrouper. Si vous remarquez ce comportement où vous avez tout sélectionné, vous appuyez sur le contrôle G et certains éléments ne sont pas inclus dans le groupe. Vous pouvez les dissocier, je vais donc les dissocier. Aujourd'hui, ce sont des individus. Maintenant, laissez-moi simplement chercher le groupe. C'est le groupe 16. Permettez-moi simplement de l'appeler barre latérale. Je peux maintenant passer au logo du projet. Permettez-moi simplement de l'appeler logo et de le faire glisser dans le groupe de barres latérales. Sélectionnez également cette ligne, barre latérale. Entrez-le et faites-le également glisser dans le groupe de barres latérales. Déposez-le là-dedans. Maintenant, si je réduis le groupe de barres latérales, je peux porter la barre latérale entière comme ça. Maintenant, souvenez-vous que nous l' avions créé en tant que groupe, donc pas de problème. Il s'agissait également d'un groupe. ne s'agit pas entièrement d'un groupe car ce texte ne rejoignait pas le groupe lorsque nous avons essayé Control G. Alors laissez-moi voir. C'est ce qu'on appelle le groupe Sales Last Week. Une fois sélectionnée, je vais simplement double-cliquer sur la carte de la semaine de vente. Voici le titre de la carte des ventes du Groupe 13 de la semaine dernière. Et maintenant, je peux l'intégrer à la carte des ventes de la semaine dernière. Maintenant, si je le fais glisser et que je le déplace, il se déplace avec un groupe parce qu'il fait partie du groupe et que je prends l'habitude d' étiqueter chaque élément avec son nom approprié. Si c'est ce montant ici, cela n'a pas besoin d'étiquette. Mais maintenant, pour cette carte, nous pouvons l'appeler carte des revenus totaux. Carte. Oh, huit. Nous avons mal étiqueté ce qu'il fallait. Par exemple, ce groupe ici présent, appelons-le carte Total Earnings car il s'agit de la carte des gains totaux. Comme vous pouvez le voir ici dans notre référence, si je sélectionne cette option, cela s'appelle les revenus totaux. Si je sélectionne cette option, il s'agit du bénéfice net. Sélectionnez ces dépenses, juste comme ça, et il y a tout le reste dedans. Revenons-en à nos cartes. Bien sûr, je ne perdrai pas de temps à étiqueter ces autres pièces, mais vous avez compris la perceuse. Bien entendu, il ne s'agit pas non plus d' un groupe à part entière, à moins que nous ne changions cela. Disons que ce sont bénéfices du mois dernier. Mois. Cliquez à l'extérieur et sélectionnez cette option. Ce groupe a eu lieu le mois dernier, laissez-moi résumer cela. Laissez-moi sélectionner ceci. C'est le groupe 14. Permettez-moi de double-cliquer dessus et de l'appeler carte mensuelle de vente. Maintenant, titre du mois de vente. Et déposez-le là-dedans. Carte Total Earnings, qui est ce bouton à sept barres latérales, barre de recherche. C'est bon. Nous voulons maintenant créer le groupe de contenu principal. Maintenant, répétons ce que nous venons de faire C G. Contenu principal. Si je le cache, c'est de la faute. En fait, ce texte devrait également figurer dans le contenu principal. Il suffit donc de le faire glisser et de le mettre dedans , ainsi que ce bouton. Appelons-le « bouton de création ». N'oubliez pas, les gars, que ce n' est qu'un guide. Prenez le temps d'organiser chaque élément de la manière qui convient à vous et aux membres de votre équipe si vous avez une équipe. Alors, c'est quoi ce rectangle ? Je ne sais pas de quel rectangle il s'agit, si je le touche, et c' est l'arrière-plan. Par terre. Je vais donc également le mettre dans le contenu principal. Et maintenant, c'est au-dessus de tout, donc je vais le faire glisser et le mettre en dessous de la carte des revenus totaux. Maintenant, comme vous pouvez le constater, la barre latérale n' est pas visible et la barre de recherche car l'arrière-plan se trouve à l'intérieur du contenu principal et le contenu principal est au-dessus de la barre de recherche. En fait, nous ne l'avons pas mis dedans. Faisons glisser la barre latérale au-dessus du contenu principal et la barre de recherche au-dessus du contenu principal. Maintenant, dans le contenu principal, faites glisser l'arrière-plan. Juste en dessous du total des revenus. Maintenant, double-cliquez sur Macbook Pro, qui était le cadre, et appelons-le tableau de bord Nous pouvons maintenant réduire le tableau de bord, et c'est par là que nous commençons si nous décrivons ce projet à quelqu'un. Le tableau de bord est composé de la barre latérale et du contenu principal. Et la barre latérale est composée de tous ces boutons, et je peux les réduire. Ligne de barre latérale, le logo. Tu peux réorganiser les choses. Vous pouvez placer le bouton 1 au-dessus du bouton 6. Vous avez déjà compris, je suis sûr que vous pouvez continuer à tout réorganiser et à tout organiser Avant de partager ce projet avec quelqu'un, vous devez l' organiser de cette façon. Jusqu'à présent, je pense que nous avons abordé la plupart des choses que vous utiliserez la plupart du temps lorsque vous travaillerez chez Figma Bien entendu, ce n'est que le premier volet d' une série de cours. Je publierai régulièrement des articles sur Figma, Je publierai régulièrement des articles sur des notions de base aux niveaux avancés Avant de partir, j'ai quelques dernières réflexions que j'aimerais partager avec vous Je vous verrai donc dans la leçon finale. N'allez pas loin. 14. Réflexions finales: Je voudrais juste prendre un moment pour vous dire un grand merci d'être restée avec moi jusqu'à la fin de ce cours. J'espère que vous l'avez trouvé à la fois instructif et agréable et que vous avez maintenant plus confiance en vos compétences en figma Vous disposez désormais d' un tableau de bord entièrement conçu que vous pouvez partager avec vos amis ou collègues de travail, et je suis très fier de vous pour cela. En fait, je vous encourage à vous féliciter et à prendre un moment pour célébrer car de nombreuses personnes peuvent commencer un cours, mais peu de personnes parviennent à le terminer. Et tu l'as fait. Félicitations donc pour cette réussite Si vous avez apprécié ce cours et que vous l'avez trouvé utile, j'aimerais vous demander une simple faveur. Veuillez prendre un moment, en fait, moins d'une minute pour rédiger une critique et dire autres ce que vous avez pensé du cours. Vos commentaires sont extrêmement précieux car ils m'aident à savoir si je fais du bon travail et aident les autres étudiants à découvrir ce cours. Lorsque les étudiants découvrent votre évaluation du cours, ils peuvent facilement décider s' il s'agit d'un bon cours à suivre. Donc, comme je l'ai mentionné, cela vous prendra moins d'une minute, mais cela fera une énorme différence. Cliquez simplement sur l'étoile d' évaluation située sous ce lecteur vidéo et dites-moi ce que vous avez pensé du cours. Et n'oubliez pas de consulter mon profil pour d'autres cours sur l'interface utilisateur, expérience utilisateur et le design Web. Je propose une variété de cours conçus pour vous aider à continuer à développer vos compétences et à faire progresser votre carrière. Parce que n'oubliez pas que nous vivons dans un monde numérique. Et il est crucial de posséder ces compétences. Alors consultez mon profil pour plus de cours. Et une fois que vous aurez fini de travailler sur votre projet de tableau de bord, n' oubliez pas de le partager ici avec la communauté. Nous adorons partager nos projets pour recueillir les commentaires des autres étudiants et des enseignants. Permettez-moi de vous montrer un exemple de cours récent. Voici un cours que j'ai publié il y a quelque temps. Et sous l'onglet projets et ressources, voici quelques exemples de projets soumis par les étudiants pour obtenir des commentaires. vous suffit donc d' accéder à l'onglet Projets et ressources et de cliquer sur Soumettre le projet. Et là, vous pouvez télécharger une capture d'écran de votre version terminée. N'oubliez pas de lui donner un titre de projet et peut-être une description du projet. J'ai donc vraiment hâte de voir ton projet final. Encore une fois, je tiens à vous remercier de m'avoir rejoint dans ce cours, et j'ai hâte de vous voir dans le prochain. Pièce Happy Designing.