Figma pour la conception de sites Web UI & UX : les éléments essentiels

1. Introduction: Bonjour et bienvenue dans ce cours qui va vous apprendre les éléments essentiels de travailler avec Figma. Je suis Chris Baron, un concepteur professionnel de sites Web et d'applications, ainsi qu'un instructeur le plus vendu. Dans ces deux heures, vous allez apprendre à vous familiariser avec Figma en un rien de temps. Et c'est sans expérience préalable. Notre objectif est de nous habituer au programme tout en s'amusant. C'est pourquoi j'ai mis au point toutes sortes d'activités et d' exercices pour que vous puissiez améliorer vos compétences tout en faisant quelque chose d'amusant et intéressant. Figma est la nouveauté pour les projets de conception Web et d' applications mobiles. Il devient rapidement la norme de l'industrie. C'est donc une bonne chose d' apprendre à avoir un nouveau CD. Figma est en concurrence avec Adobe XD sketch dans quelques autres programmes. Pour suivre ce cours, vous allez apprendre tout ce que vous devez savoir à ce sujet, y compris les bases de son installation, et quel est mon point de vue en tant que professionnel ? Est-ce suffisant ? Est-ce mieux qu'Adobe XD et tous ces autres programmes ? À la fin de ces deux heures, vous allez avoir terminé un site Web de réunion , un collage. Vous saurez comment concevoir des charges, des calques de texte et vous comprendrez bien et vous comprendrez bien les fondamentaux et Figma. Des éléments comme masquer des éléments, comment travailler avec les couleurs, mais aussi des éléments plus avancés comme la façon de travailler avec des grilles, des effets de toutes sortes, des composants et des brouillons. Enfin, ce cours fait partie d' une série et c'est le début de votre voyage. Une fois cette partie terminée, vous devez poursuivre les étapes suivantes afin pouvoir maîtriser Figma. Et avec ça, passons le mot. 2. What et est-de mieux que d'autres programmes de design ?: Hé, c'est Cress, on parle moins de Figma. Figma est un programme de conception gratuit qui vous permet de créer de superbes projets de conception Web et d'applications. Ainsi, les sites Web, les applications Android et les applications iOS. Maintenant que je dis que c'est gratuit, oui, il est gratuit et il n'y a pas de limites significatives au plan gratuit. Vous pouvez consulter la comparaison ici. En gros, vous ne pourrez pas partager des choses au sein d'une équipe, mais ce n'est vraiment pas essentiel. Si vous travaillez tout seul, vous êtes le bon il y a. Plus d'informations à ce sujet dans une autre vidéo. Maintenant, la prochaine chose que vous devez savoir sur Figma, c'est qu'il y a beaucoup de battage médiatique autour de cela. Les gens parlent de Figma et à quel point c'est génial. Il a une dynamique sérieuse. Et vous pouvez le constater à partir de ce tableau ici, moins en termes d' animation de vos conceptions, qu'on appelle prototypage. Maintenant, Figma semble devenir folle. Pourquoi les designers aiment-ils autant Figma ? Je ne peux pas vraiment dire qu' il y a une chose spécifique, mais permettez-moi de vous dire mon point de vue. Premièrement, j'aime le fait que plusieurs personnes puissent travailler à Figma en même temps, dans le même projet. C'est totalement génial. Maintenant, pour être juste, d'autres programmes le font également. Par exemple, Adobe XD, la deuxième chose que j'aime bien, vous pouvez utiliser Figma dans votre navigateur. Oui, tu as entendu ça, non ? Vous pouvez allumer à peu près n'importe quel navigateur, inscrire gratuitement et vous mettre au travail. Votre ordinateur n'a pas besoin d'être si puissant. Vous aurez besoin d'au moins Windows 8.1 ou MacOS Sierra, mais cela ne devrait pas poser de problème. Maintenant, c'est tout. Rien de plus. Une suggestion, veuillez installer le programme autonome. C'est ce que nous allons utiliser dans ce cours. Veuillez suspendre la vidéo, créer un compte gratuit et télécharger le programme. Encore une fois, vous pouvez l' utiliser dans votre navigateur, mais je préfère l' utiliser comme programme. Je ne vais pas vous montrer comment vous pouvez vous inscrire parce que c'est comme s' inscrire à Gmail. Le NADH est très simple et direct. La troisième raison pour laquelle j'aime Figma est qu'elle est assez facile à utiliser pour les débutants, mais elle est conçue pour gérer les plus grands projets du monde en ce moment. Pensez à des projets comme Lyft ou Uber. Pensez aux applications disposant de quatre ou 500 écrans. Figma peut le gérer, pas de problème. Et plus encore, Figma vous permet d'effectuer rapidement des modifications sur des centaines d'écrans. C'est le vrai pouvoir de Sigma. Il est en fait utilisé par l'équipe de conception de Rubens. Une chose avant d' aller de l'avant, Figma dans votre navigateur contre Big Man a un programme autonome. n'y a aucune différence entre eux. Est-ce que le même programme, les mêmes fonctionnalités ? Si vous préférez travailler dans un navigateur, c'est très bien, mais j' aime garder les choses séparées. Donc, même s'il n'y a pas de différence, encore une fois, je recommande la version autonome du programme. Parlons ensuite de Figma contre Photoshop, Illustrator, Sketch, Adobe XD, etc. Tout d'abord, vous ne devez pas comparer Figma à Photoshop et Illustrator. Ceux des programmes Adobe sont incroyablement puissants, mais conçus pour autre chose, complètement différent. Photo Shop est un programme incroyablement polyvalent. Il peut faire plein de choses, mais parce qu'il est si capable, c'est aussi incroyablement lent. C'est comme un bateau de croisière rempli de nombreuses choses pour votre plus grand plaisir. Mais parce qu'il offre tellement de choses, il est très difficile de le contourner et n'est pas exactement la définition de la vitesse. Pour bien le dire. Illustrator, encore une fois, similaire à Photoshop. C'est un programme fantastique. J'adore ça, mais il s' agit de travailler avec des vecteurs. Figma, quant à elle, se consacre à la conception Web et à l'ajout de projets de design. C'est ça. L'ensemble du programme s'articule autour de ces deux types de projets. Et parce qu'il se concentre uniquement sur ces deux choses, il est plus rapide, plus facile à apprendre, mais il est également incroyablement puissant à cet égard. Maintenant, Adobe XD et sketch, qui sont des concurrents directs de Figma. Ces deux programmes font la même chose, mais lequel est le meilleur avec C ? Ce n'est pas la bonne question. n'y a pas de meilleur programme. Bmw série trois contre Mercedes, classe C contre A4. Lequel est le meilleur ? Le dernier iPhone contre le dernier Android, ce qui est le meilleur. Pepsi ou Coke, ce qui est le mieux. C'est une question de préférence. Bien sûr que nos différences, mais au bout du compte, ils font tous la même chose. Maintenant, il faut noter que Figma est gratuit à 9$ par mois. Xd coûte environ 10$ par mois au moment de cet enregistrement. Et Adobe XD dispose d'une fonctionnalité de grille VBD, ce qui est totalement génial. Mais figma a une mise en page automatique et comme vous pouvez le constater, c'est une très longue liste de différences. Mais comme je l'ai déjà dit, il n'y a pas de vainqueur clair. Et on va le répéter encore. Il y a beaucoup de différences, mais il ne s'agit pas d'une chose à laquelle vous devez penser. Croyez-moi, même s'il s' agit de concurrents directs, je ne peux pas vous dire lequel est meilleur parce que c'est une chose subjective. De plus, j'ai un cours de conception Web dans Photoshop et un cours de conception Web dans Adobe XD. Au bout du compte, peu importe ce que vous utiliserez. Ce qui compte, c'est ce que vous pouvez en faire. Je vais le dire encore une fois. Peu importe le programme avec lequel vous choisissez de travailler. Le client s'en fout, le développeur s'en fout, la communauté du design s'en fiche. Je vais vous montrer comment préparer la conception pour le codage, et cela fonctionnera pour toutes les personnes impliquées. Le codeur n'aura pas à apprendre Figma avec Adobe XD avec Photoshop. Le client n'aura pas à ouvrir le fichier source et à jouer avec lui. Ce n'est pas nécessaire. Ainsi, à cause de ces choses, vous pouvez utiliser ce que vous voulez. Si vous choisissez Figma et la joie que Pepsi et BMW. C'est génial. Si vous choisissez autre chose, encore une fois, c'est la même chose, cela ne fait aucune différence. Alors, s'il vous plaît, ne vous inquiétez pas et ne vous demandez pas lequel est le meilleur. Demandez-vous plutôt lequel préférez-vous ? Et avec cela, suspendez la vidéo et assurez-vous que Figma installé en tant que programme autonome car nous sommes sur le point de travailler. Merci. 3. L'écran de bienvenue dans Figma: Bonjour et bienvenue à cette conférence. Ouvrons Figma et on s'y habitue. Voici à quoi ressemble le programme au moment de cet enregistrement. Au départ, il y a beaucoup de choses à regarder, mais simplifions cela. Pour créer un nouveau projet. Vous pouvez cliquer ici dans le fichier de conception du côté supérieur droit. Une fois que vous aurez cliqué dessus, vous serez amené à votre nouveau projet. Pas de questions, pas de configuration. grandes fusions nous amènent directement dedans. Notez rapidement que si vous venez Adobe XD ou de Photoshop, vous ne pouvez pas ouvrir vos projets dans Figma. En ce moment. Figma ne peut ouvrir que des fichiers d'esquisse et c'est à peu près cela. Vous ne pouvez donc pas vraiment venir d' un autre programme avec vos fichiers précédents. Permettez-moi de le fermer pour que je puisse vous montrer une autre façon de créer un nouveau projet. Et c'est avec le contrôle et là que vous pouvez vous souvenir de N pour de nouveaux. C'est donc le contrôle. Et dans ce cours, nous ne nous intéressons qu'aux fichiers de conception. Veuillez donc ignorer cette autre option qui n'est pas nécessaire. Si vous n'aimez pas voir cette option, il suffit de cocher cette case. Bon, revenons à l'écran principal ou à l'écran d'accueil. C'est ici qu'il peut voir vos projets récents et vous pouvez modifier cette section en cliquant ici. Je recommande cette version miniature. Vous ne verrez pas les mêmes projets de votre côté car ils sont spécifiques à mon compte. Cette disposition peut changer au fil du temps, alors ne vous inquiétez pas si la vôtre ne ressemble pas exactement à celle-ci. Par exemple, nous avons ici une section de modèles, mais nous pouvons simplement la fermer au cas où vous souhaitez vérifier votre profil, vos paramètres ou vous déconnecter. Vous pouvez le faire à partir d'ici maintenant. Bon, c'est bon. Maintenant, permettez-moi de vous montrer les choses importantes. Figma est très importante dans sa communauté. Cliquez ici et vous obtiendrez une nouvelle mise en page. Fondamentalement, c'est là que vous avez une tonne de trucs gratuits , de plugins, de cadeaux, de choses qui vous aident avec vos filaires, des tonnes de choses. Vous avez une barre de recherche ici au cas où vous cherchiez quelque chose en particulier. Il y a toutes ces catégories ici. Maintenant, je sais que cela pourrait vous effrayer. Il y a beaucoup de choses à prendre en compte, mais sachez que rien ici n'est essentiel. Ce sont des choses qui pourraient vous aider après avoir acquis plus d'expérience sous votre ceinture. Ce sont des ressources qui peuvent vous rendre un concepteur plus rapide et plus efficace, mais plus tard, en tant que débutant, vous ne devriez pas vous concentrer sur elles. Je vous propose plutôt apprendre les principes de la conception Web. Et une fois que vous disposez d'une base solide, vous pouvez commencer à explorer ces fichiers. Une fois encore. Certains d'entre eux sont gentils, mais pas au début. Maintenant, comment revenir à l'écran principal ? Eh bien, si vous cliquez ici, rien ne se passera. Ce que vous devez faire est de cliquer sur cette flèche ici. Cela vous ramènera. Nous avons donc des récents, des brouillons et de la communauté. Au fait, c'est en version bêta. Cela peut donc changer lorsque vous regardez cette vidéo. Si c'est le cas, ne vous inquiétez pas, la fonctionnalité sera la même, d'accord ? Et lorsque vous êtes dans la communauté, vous pouvez revenir en arrière en cliquant ici. Assurez-vous de vérifier ce surlignement, je le sais parmi l'onglet récent à cause de cette couleur bleue. Si vous avez cliqué par erreur sur un projet d' équipe, vous obtiendrez une autre mise en page. En parlant de conceptions, Figma vous permet travailler avec plusieurs designers en même temps, dans le même fichier. Permettez-moi de réorganiser rapidement ma configuration. J'ai le programme autonome d' un côté et mon navigateur de l'autre côté. Imaginons qu'il s'agisse d'un autre designer. Maintenant, en bougeant ma souris, vous pouvez la voir ici aussi. C'est ainsi que c'est comme travailler avec plusieurs personnes dans le même dossier. Mais ce n'est pas pour tout le monde, donc nous n'y parlerons pas. En parlant de choses que nous ne couvrirons pas trop , c'était cette autre chose appelée confiture de figues. Nous pouvons le voir ici en haut à droite, mais aussi lorsque nous appuyons sur Control N, et nous ne cochons pas cette case en bas. Vraiment vite. La confiture d'œufs est un tableau blanc que vous pouvez utiliser pour esquisser vos idées. Laissez-moi vous montrer à quoi ça ressemble. Il s'agit essentiellement d'un lieu où vous pouvez réfléchir à des idées, esquisser des choses, créer une structure pour vos projets, etc. Mais je pense que Jam est un outil distinct, n' est pas essentiel à notre travail de conception Web, donc nous n'y parlerons pas. Jam est idéal pour les réunions en ligne où plusieurs personnes veulent discuter de quelque chose. Il fonctionne directement dans votre navigateur. Il est intuitif, il est donc facile de commencer. Mais encore une fois, puisque nous ne faisons pas partie d'une équipe ou d'une entreprise, allons le mettre de côté. Je sais que vous êtes peut-être curieux à ce sujet, mais il y a un moment et un endroit pour cela, et ce n'est pas maintenant. Croyez-moi là-dessus. D'accord. Faisons une pause rapide et nous continuerons dans une seconde. 4. Commencer avec Figma: Bienvenue de retour. Mettons-nous au travail. Mais je vous encourage à regarder la plupart des vidéos, surtout leurs mains sur deux fois. La première fois que vous regardez. N'essayez pas de travailler ensemble. Il suffit de regarder et de comprendre ce qui se passe lorsque vous arrivez à la fin de la vidéo, redémarrez et regardez-la à nouveau, cette fois en faisant une pause aussi cette fois en faisant une pause aussi souvent que nécessaire pour travailler ensemble. C'est de loin la meilleure façon d'apprendre. Encore une fois, n'essayez pas de travailler avec moi lors de votre premier visionnage. Au lieu de cela, faites-le la deuxième fois que vous regardez la vidéo. Et s'il vous plaît, n'utilisez pas votre téléphone. Il est trop petit et vous ne comprendrez pas ce qui se passe. Bon, commençons. Veuillez créer un tout nouveau projet avec contrôle et, ou en cliquant ici, tout semble vide. Mais créons un deuxième projet en utilisant le même contrôle de raccourci clavier. Et d'accord, jetons un coup d'œil ici. Nos projets sont affichés sous forme d'onglets. Si nous voulons revenir à notre écran principal, nous pouvons cliquer ici sur cette icône d'accueil. Juste comme ça. Ne vous déplacez pas entre les projets. Il suffit de cliquer sur les noms. l'heure actuelle, ils sont tous deux appelés Untitled. Pour modifier ce point de vue ici, au milieu de la page. Cliquez ici, et nous pouvons maintenant le renommer. Je l'appellerai Kress Won. Maintenant, passez à l'autre et renommez-le pour appuyer sur. Donc, les projets 1 et 2, n'est-ce pas ? Maintenant, créons un rectangle en appuyant sur R, R pour l'outil Rectangle, ou vous pouvez simplement cliquer ici. Vous pouvez voir que cet outil est celui qui est sélectionné car il a ce surlignement bleu. Maintenant, nous allons en faire glisser un. Il est gris sur gris, donc ça ne fonctionne pas. Changeons cette couleur. Cela se fait toujours de ce côté droit. Ce panneau change en fonction de ce qui est sélectionné. Vous savez, le rectangle est sélectionné car il a ce surlignement bleu. Si nous cliquons ailleurs, remarquez que nous avons très peu d'options ici. D'accord ? Sélectionnez le rectangle et sur le côté droit vous y trouverez Phil. Veuillez cliquer sur ce carré, pas sur les lettres, sur le carré, alias l'échantillon. Ok, ça va ouvrir le sélecteur de couleurs. C'est le sélecteur de couleurs. Choisissez n'importe quelle couleur aléatoire, puis appuyez sur la touche d'échappement ou sur le bouton Fermer. Mais si vous cliquez sur les caractères, vous pouvez saisir manuellement le code couleur. C'est très bien aussi, mais ce n'est pas ce que nous voulons en ce moment. D'accord. Maintenant, nous avons un carré rouge à l'intérieur de Chris, pour aller aux onglets et à la tête, ce symbole X, pour le fermer. Maintenant, c'est vraiment important. Nous sauvegardons tout le travail que nous venons de perdre. Cela arriverait. Écoutez, tout va bien. Cliquez sur l'icône Accueil. Et dans le récent coup de couteau, vous verrez cresser, c'est le premier de la liste car c'est le dernier projet sur lequel nous avons travaillé. Si vous souhaitez l' ouvrir, double-cliquez dessus. Le premier point essentiel est donc que Figma fonctionne avec des onglets exactement comme n'importe quel navigateur. Si vous souhaitez basculer entre les onglets, cliquez dessus. Le point essentiel suivant, Figma sauve toujours votre travail, il n'est donc pas nécessaire d'utiliser Control S ou tout autre raccourci clavier. Figma enregistre tout automatiquement. Mais cela pose la question suivante : où le projet est-il sauvegardé ? Ils ne sont pas sur votre ordinateur local. Tout est enregistré sur le Cloud. C'est pourquoi Figma est génial. Si vous vous connectez sur un autre ordinateur, vous aurez accès à tous vos fichiers. C'est ainsi que plusieurs personnes peuvent travailler sur le même projet. Puisque tout est sur le Cloud. Ainsi, sur Internet, tout le monde y a accès. Pensez-y. Si le fichier se trouve sur votre disque dur, d'autres personnes devront se connecter à votre ordinateur et ce n'est pas cool. Mais comme le fichier se trouve sur le serveur, sur le Web, tout le monde peut y accéder. Autrement dit, si vous leur permettez, bien sûr, le cloud est sûr, rapide et très facile à s'habituer. L'inconvénient est que vous avez besoin d'un accès à Internet. Maintenant, ce n'est pas la fin du monde. Si vous êtes sur un vol ou si vous êtes déconnecté pendant quelques heures. Une fois de retour en ligne, le projet sera à nouveau téléchargé dans le cloud. Mais disons que vous n' aimez pas travailler comme ça. Peut-être avez-vous l'habitude de faire des photoshops pour enregistrer des fichiers. Vous avez ce PSD sur votre disque dur. Vous pouvez le copier, le coller sur une clé USB, l' envoyer par e-mail, etc. Le fait est que tout le monde se dirige vers le Cloud. Photoshop a également cette option. Adobe XD est important sur le Cloud. Même l'esquisse a montré très clairement que le Cloud est l'avenir. Mon conseil, ne le combattez pas, même si vous n'êtes pas à l'aise en ce moment, essayez-le. Tant que vous nommez les projets de façon décente. Et vous pouvez voir les miniatures. Vous devriez pouvoir les trouver rapidement, mais juste au cas où vous ne pouvez tout simplement pas le gérer. Cliquez ici sur le logo Figma. À partir de là, allez dans Dossier. Maintenant, choisissez Enregistrer la copie locale. Encore une fois, je ne le recommande pas, mais sachez que vous pouvez le faire. Il y a encore quelques détails ici et là, mais passons à un projet pour nous salir les mains. Travaillons sur quelque chose. 5. Meilleures façons de déplacer dans Figma: Bienvenue de retour. Parlons des meilleures façons de se déplacer et de Figma. Tout d'abord, accédez à l'onglet Fichiers récents et cliquez avec le bouton droit sur ces deux projets que nous avons précédemment créés. Pour supprimer le projet, suffit de cliquer dessus avec le bouton droit de la souris dans la liste et de choisir le saut. Ok, juste au cas où vous vous trompez, vous pouvez toujours aller aux brouillons et partir de là, vous avez une section supprimée. D'accord ? Maintenant, créons un tout nouveau fichier pour contrôler la terre, quelle que soit la méthode que vous préférez, et commençons à travailler. Au départ, je sais que tout semble tellement vide. Tout projet commence par un cadre. C'est la première chose dont vous devez vous souvenir. Le cadre A est comme un tableau d'art ou une toile, mais il y a juste un peu différent dans Figma, c'est un endroit où vous ajoutez toutes vos images de texte, essentiellement votre contenu Tout est à l'intérieur du cadre. Ne vous inquiétez pas de la définition. Au fur et à mesure que nous travaillons, vous l'aurez bientôt. Pour ajouter un cadre. Veuillez appuyer sur F pour activer le mur encadré ou cliquez simplement ici. Oh, au fait, est-ce qu'un autre outil ici appelé la tranche habite, mais nous ne voulons pas ça. Ok, nous avons sélectionné l'outil Frame et le panneau de droite vient de changer. Vous avez de nombreuses options très bien organisées. Téléphone, tablette ou ordinateur de bureau, etc. Et vous pouvez cliquer sur les noms pour les ouvrir ou les fermer. Et si vous cliquez sur l'un d'entre eux, exemple iPad Mini, le cadre est automatiquement ajouté. Vous pouvez également le voir dans le panneau Calques. Voyez ici ce symbole qui ressemble à un hashtag. C'est un cadre pour le supprimer. Il suffit d'appuyer sur la touche Supprimer et c'est tout. Bon, passons à la section Bureau et choisissons le premier élément de cette liste , également appelé bureau. Nous pouvons voir la taille ici. Il est 1440 d'ici 1024, puis vous l'avez. Maintenant, le problème est plupart des projets de conception Web devraient commencer que la plupart des projets de conception Web devraient commencer par une trame de 1920 par 1080. C'est pourquoi je recommande vivement la meilleure façon de le redimensionner est d'utiliser cette partie ici. W représente le web, et h représente la hauteur au lieu de 1440, cliquez ici. Et maintenant, vous pouvez taper en 1920. Même chose pour la hauteur que nous recherchons, puis 80. Maintenant, le cadre s'est agrandi et on ne le voit pas très bien. Voici ce que vous devez faire. Zoom avant ou arrière. Maintenez la touche Ctrl enfoncée et utilisez la molette de votre souris. Si vous faites défiler vers l'arrière, vous effectuerez un zoom arrière. Si vous faites défiler vers l'avant, vous effectuerez un zoom avant après avoir fait quelques fois, ce sera naturel. Veuillez utiliser votre main gauche, idéalement votre pinky, pour maintenir la touche de contrôle gauche de votre clavier enfoncée. Utilisez maintenant votre parchemin. Veuillez procéder comme suit. Déplacez votre souris dans la coordonnée du cadre et effectuez un zoom avant. Comme vous pouvez le constater, cela vous aide vraiment à vous concentrer sur ce domaine. Maintenant, effectuez un zoom arrière et déplacez-vous vers un autre coin. La même chose. zoom avant en faisant défiler le mot. Je sais que cela semble être très basique, mais croyez-moi, il est essentiel que vous pratiquiez. Vous ne pouvez pas avancer tant que vous ne maîtrisez pas ce genre de choses. Il y a encore une chose que vous devez savoir utiliser, c'est la clé de la barre d'espace. Dites cela avec Zoom puis dans un coin et très satisfait du niveau de zoom. Mais maintenant, nous voulons passer à l'autre coin. C'est ce qu'on appelle le panoramique. Panoramique autour. Maintenez la touche de la barre d'espace enfoncée et le curseur de votre souris se transforme en main. Si vous lâchez la touche de la barre d'espace, elle retournera aux données standard, Le bien déplacé, donc encore une fois, maintenez la barre d'espace, cliquez sur maintenir et passez de la coordonnée à la coordonnée, de côté à l'autre. sur le côté, en haut et en bas. En parvenant à maîtriser ces deux techniques simples, vous créez une base très solide. C'est votre alphabet. Il s'agit de vos mathématiques de base et de base. Apprenez-le s'il vous plaît n'y a pas de contournement de ça. Pour résumer, maintenez la touche Ctrl enfoncée et utilisez défilement de votre souris pour effectuer un zoom avant ou arrière et maintenez la touche de la barre d'espace enfoncée, cliquez et maintenez-la enfoncée pour vous déplacer côté à l'autre pour effectuer un panoramique. OK, s'il vous plaît, commencez un projet vide et pratiquez-le car la prochaine conférence sera un exercice. 6. Exercice : comment déplacer des éléments: Bienvenue de retour. C'est notre premier exercice. Voici ce que je veux que vous fassiez. Veuillez télécharger ce fichier appelé premier exercice que FIG. Lorsque vous l'avez trouvé, faites-le glisser dans Figma. Vous devriez voir un surlignement bleu. C'est bon signe. Déposez-le et le fichier va être importé. Si vous n'aimez pas le glisser-déposer , veuillez le faire. Accédez à l'onglet Accueil. Du côté droit, vous verrez cette icône ici, juste en dessous de votre avatar. Cliquez dessus et vous pourrez rechercher ce fichier, sélectionner, et cela fera la même chose. Vous allez l'ouvrir. C'est ce que je recommande, d'accord ? Dans ce projet, vous allez voir deux cadres dans le panneau Calques. Le premier est appelé petit cadre, et le second, le gros cerveau. Et c'est essentiellement votre tâche. Vous devez zoomer sur cette image sur le côté droit, sélectionner l'une de ces icônes, puis déplacer dans le grand cadre. Comme vous pouvez le constater, vous devez utiliser la touche de la barre d'espace pour effectuer un panoramique et vous devez effectuer un zoom avant et un zoom arrière. Je veux que le siège soit placé sur des icônes dans tous les coins du grand cadre. C'est votre tâche. Assurez-vous de les déplacer un à la fois. Ne trichez pas. Ce n'est pas amusant de cette façon. Et s'il vous plaît, ne déplacez pas les cadres ensemble, laissez-les tels quels. Maintenant, une dernière chose, vous remarquerez que le petit cadre comporte un autre cadre à l'intérieur. C'est ce qu'on appelle « encadré ». Je ne veux pas que cela soit déplacé dans le grand cadre, juste celui de l'icône. Découvrez comment vous pouvez gérer cela. Maintenant, si vous gâchez quelque chose, à peu près n'importe quoi, vous pouvez toujours utiliser Control Z pour annuler plusieurs étapes. Ok, lorsque vous avez terminé, veuillez exporter le grand cadre format PNG et le partager sur la plateforme pour que je puisse le voir. Voici comment exporter dans Figma. Sélectionnez le grand cadre en cliquant sur ce nom. Veuillez noter que si vous cliquez simplement à l'intérieur, vous ne le sélectionnerez pas. Cliquez donc en haut à gauche ou vous pouvez utiliser le panneau Calques. Il suffit de cliquer ici. Maintenant, déplacez ce patient sur le côté droit de l'écran. La dernière option ici s' appelle Export. Il est grisé, mais vous pouvez cliquer dessus. À partir d'ici. Nous avons quelques options. Nous allons être satisfaits d'un X, B et G. Donc, en supposant que nous ayons fini de faire de l'exercice, nous pouvons appuyer sur ce bouton et nous allons obtenir cette fenêtre. J'aime enregistrer des choses sur mon bureau. Je pense que c'est génial. OK, appuyez sur Enregistrer. Et ça va être que s'il vous plaît, faites travailler deux icônes dans chaque coin du grand cadre. façon dont vous les organisez, c'est à vous de décider. Ce que j'aimerais voir une belle mise en page. Ne continuez pas le cours car dans la vidéo suivante, je vais vous montrer comment le résoudre. Veuillez faire une pause et commencer à travailler. Merci beaucoup. Amusez-vous bien avec ça. 7. Résoudre l'exercice et quelques conseils professionnels: Bonjour et bienvenue. Avez-vous fait les exercices par vous-même ? Si ce n'est pas le cas, veuillez arrêter la vidéo dès maintenant. Je sais que cela semble si simple et je suis sûr que vous comprenez ce que vous devez faire, mais vous devez vous entraîner. La vitesse nécessite une autre pratique. Bon, voici une solution et quelques conseils pour être un peu plus rapide. La façon habituelle de le faire consiste à zoomer un peu et à cliquer sur la première icône. Maintenant, effectuez un zoom arrière et déplacez-le vers le grand cadre. Peu importe que vous le fassiez en un seul mouvement ou d'autre part, vous pouvez le faire en plusieurs étapes. Vous effectuez un zoom arrière, vous en sélectionnez un, puis vous le déplacez vers le bord gauche de l'écran. Maintenez la barre d'espace enfoncée, cliquez sur Maintenir et faites un panoramique vers la gauche. Maintenant, déplacez-le à nouveau. Et si nécessaire, faites-le encore quelques fois. Maintenant, lorsque vous placez la deuxième icône, je vous suggère de faire attention à ces lignes rouges. Ils vous aident à aligner les choses avec précision. Je me fiche de savoir où vous placez les icônes dans le coin du cadre, mais j'aimerais les voir alignées. Bon, maintenant, c'est la façon de travailler standard et je vous suggère de faire l'exercice de cette façon au moins deux fois. Ok, donnez maintenant une alternative. Vous pouvez régler votre niveau de zoom à un point où vous voyez les deux images sur le même écran. Maintenant, prenez le petit et déplacez-le juste à côté du grand. Ce serait de la tricherie et je ne vous encourage pas à travailler de cette façon pour cet exercice spécifique. L'idée est d'apprendre à zoomer et à dézoomer et à faire un panoramique, mais cela facilitera les choses et nous pourrons apprendre quelques autres choses. Voici un autre conseil. Si vous cliquez, faites glisser et créez un rectangle, vous allez sélectionner certaines des icônes du petit cadre. Vérifiez le panneau Calques pour cela. Découvrez comment la coche du Chevron est maintenant mise en surbrillance. C'est bien. Mais si vous cliquez et faites glisser tout autour de l'élément, vous allez maintenant sélectionner l'ensemble du cadre. L'essentiel est que vous pouvez sélectionner plusieurs éléments en faisant glisser la boîte. Si les tourbières sont en train de mendier, vous allez sélectionner le cadre lui-même. Alors, assurez-vous d'en prendre note. Bon, maintenant, voici une autre façon de travailler. Je vais sélectionner le moins et je le glisserai sur le grand cadre. Notez que Figma le déplace immédiatement dans le panneau Calques. C'est génial. Ainsi, chaque fois que vous déplacez une couche au-dessus de la pluie, elle l'avalera. Veuillez prendre note de cela. Bon, maintenant je vais ajouter rapidement le rectangle aléatoire. Remarquez le panneau Calques. Il se trouve au-dessus des deux cadres. Mais si je le déplace sur le gros, eh bien, tu y vas. Il fait juste suite à ça. Et si vous le déplacez à l'extérieur, Figma est assez intelligent pour le retirer de ce cerveau. Au fait, au cas où vous n'êtes pas sûr que ce rectangle se trouve à l'intérieur du cadre, vous pouvez simplement le faire. Cliquez ici pour fermer le cadre. C'est ce que fait cette flèche. Maintenant, nous pouvons voir que ce rectangle ne fait que flotter. Il ne fait partie d'aucun cadre. Mais si nous le faisons glisser dans le grand cadre en utilisant le panneau Calques avec si nous le faisons à partir d'ici, eh bien, voici le truc. C'est le cas. Déplacez-le dans le panneau Calques, mais pas sur le canevas réel. Vous pouvez voir le point culminant ici. Ce n'est pas si génial que ça. Mais nous pouvons faire encore une chose. Effectuez un zoom arrière jusqu'à ce que vous puissiez voir la grande image. Maintenant, concentrez-vous ici sur le côté supérieur droit. Cliquez sur ces deux icônes, la deuxième et la cinquième. Et comme ça, les rectangles se trouvent juste au milieu du cadre. Maintenant, en quoi cela nous aide-t-il ? Eh bien, nous pouvons sélectionner le symbole moins, et une fois qu'il se trouve à l'intérieur du grand cadre, nous pouvons utiliser les mêmes mondes d'alignement. Cette fois, nous allons utiliser une ligne, n'est-ce pas ? Et après cela, alignez-vous en bas, zoomez dans ce coin, puis voilà. Bon, maintenant, répétez le processus. Le fait est que vous pourriez avoir un chevauchement. pas énorme, car Ce n'est pas énorme, car c'est un excellent moyen d'introduire vos touches fléchées sur votre clavier avec cette icône sélectionnée, maintenez la touche Maj enfoncée et appuyez sur la flèche gauche. Cela va déplacer l'icône et les incréments de 10 pixels. Donc, si vous voulez vous déplacer à 20 pixels vers la gauche, il s'agit de deux onglets. Un dans les trucs cool. Le point essentiel est que lorsque vous sélectionnez un élément situé à l'intérieur du cadre, vous pouvez utiliser les outils d' alignement pour le repositionner rapidement à l'intérieur du cadre. Je le répète encore une fois. Figma sait que c' est à l'intérieur du cadre. Cela signifie que nous pouvons utiliser les outils d'alignement, repositionner comme cela. Une autre chose à noter, disons que nous passons à d'autres icônes via le panneau des calques. Ce n'est pas le meilleur choix, mais écoutez-moi. Maintenant. Supposons que nous voulions utiliser les puits d'alignement. Ceux-ci ne fonctionneront pas comme prévu car deux éléments sont sélectionnés. Et c'est parce que lorsque Figma voit deux éléments sélectionnés, si des choses que nous voulons les aligner entre eux. Donc, mon conseil, il suffit de le faire un à la fois lorsque icône, puis d'utiliser les outils d'alignement , puis la deuxième icône. Et encore une fois, les outils d'alignement sont à peu près terminés. Passons rapidement à l'icône suivante, qui a un autre cerveau. C'est quelque chose dont il faut être conscient. Voici le truc. Auparavant, nous sommes allés au-dessus de l'icône, cliqué et il a été sélectionné facilement. Mais ici, ça ne marchera pas. Vérifiez le panneau Calques. Je cliquerai sur l' arrière-plan pour désélectionner. Ok, maintenant je vais passer au-dessus de l'icône et cliquer dessus. Et remarquez que le cadre secondaire est réellement sélectionné. Pour accéder à l'icône, il faut double-cliquer au-dessus. Maintenant, le cadre s'est ouvert et nous pouvons faire notre travail avec l'icône. Refaisons-le. Si vous avez un cadre dans un cadre et qu'il y a un calque à l'intérieur que vous souhaitez sélectionner. Vous devrez cliquer, puis double-cliquer pour descendre le niveau. Assurez-vous de garder un œil sur le panneau des calques pour savoir ce qui se passe. Ce n'est pas une affaire énorme, mais vous devez vous assurer avoir sélectionné la bonne banque, accord, à la fin de la journée, c'est ce que j'aime voir de vous. Tous les inconvénients sont bien alignés. Assurez-vous de regarder cette vidéo une fois de plus pour bien comprendre tous les concepts clés. Merci et amusez-vous bien avec ça. 8. Découvrez l'interface de Figma, et pourquoi les professionnels l'utilisent: Bienvenue de retour. Lorsque vous ouvrez Figma, cela ressemble à un programme de conception de base. Ouvrons tous les nouveaux projets afin que nous puissions consulter l'interface et vraiment comprendre où Figma brille. Bon, nous y voilà. Le projet est complètement vide, il n'y a donc pas grand-chose à regarder, mais prenons le projet par le haut. Nous avons toujours l'icône d'accueil ici qui nous permet de revenir sur cet écran. Nous voudrions peut-être le faire pour ouvrir un autre projet. Vous pouvez consulter l'onglet de la communauté à côté de l'icône d'accueil, nous avons nos onglets de projet. Cette partie est très similaire à celle de votre navigateur, nous allons donc passer à la barre d'outils. C'est là que commence à penser, c'est un programme super simple. Et c'est parce que nous avons si peu d'outils. La première icône nous montre de nombreuses options. Ici, nous avons notre menu principal et nous pouvons faire beaucoup de choses. Mais voici le truc. Vous ne l'utiliserez pas si souvent. La plupart de ces options comportent des raccourcis clavier beaucoup plus faciles à utiliser. Personne ne vient ici pour créer un nouveau fichier, par exemple, la plupart des gens utilisent le contrôle N. Alors gardez cela à l'esprit. Nous n'utiliserons pas ce menu si souvent. Ok, à côté de ce menu principal, nous avons quelques outils et en fait, ils ne sont qu' une poignée. Le premier est l'outil de déplacement, et il fait exactement ce que vous pensez qu'il fait. Il bouge les choses, s'agisse de couches ou de cadres de glucose ou de tout ce qui est sélectionné. En dessous, nous avons l'outil de balance. C'est génial lorsque vous voulez redimensionner des choses et que nous avons une conférence à ce sujet. Le prochain est le cadre à mur. Ce genre de symbole ressemble cependant à un hashtag. Ce n'est pas le cas. Comme vous êtes sur le point de le voir, il s'agit en fait d'un outil très utile. Nous avons également une conférence complète à ce sujet. En continuant, nous avons les formes classiques, rectangle, la ligne, la flèche, l' ellipse, les œuvres. 95 % des cas, vous utiliserez l'outil Rectangle. n'est que des trucs de conception Web de base. À la fin de cette liste, vous avez la possibilité d' introduire une image dans Figma. Comme vous pouvez le voir, cela ouvre la fenêtre de navigation. Choisissez n'importe quelle image et vous êtes prêt à partir. Et bien sûr, nous avons également une conférence dédiée à ce sujet. Ok, maintenant, veuillez noter que les deux derniers monde sont le premier ici. Il est donc préférable de mémoriser quelques raccourcis clavier, par exemple, pour rectangle. V pour l'outil de déplacement n' est pas si génial, mais vous devez vous en souvenir. V pour l'outil Déplacer, ou cliquez simplement sur cette petite flèche et sélectionnez celle qui est la plus utile. Et c'est l' outil rectangle dans ce cas. Ensuite, nous avons l'outil stylo classique, mais nous ne l'utiliserons pas vraiment car la plupart de nos icônes et graphiques proviendront du Web. L'outil de texte est ici, raccourci clavier P, c'est très simple. Word et quelques autres outils ici qui, pour être honnête, ils ne sont pas si géniaux, que ce n'est pas si intéressant. D'accord, ajoutons le cadre , puis un rectangle juste au hasard. Juste pour que nous ayons quelque chose à regarder sur nos écrans. Peut-être un calque de texte deux. D'accord ? Maintenant, dans le panneau Calques, vous verrez ces éléments. Ils ont tous des symboles différents. Au fur et à mesure que nous continuons, vous commencerez bientôt à les apprendre. Lorsque vous avez sélectionné quelque chose, le panneau de droite affiche les propriétés de cette couche spécifique. Par exemple, nous pouvons modifier ici la famille de polices, la taille, la couleur, etc. Mais si nous sélectionnons le rectangle, il y a moins d'options. Et si nous cliquons ailleurs, désélectionnerons et ce panneau sera à peu près à eux. Voici le truc. Saisissez à nouveau le rectangle. Ce panneau de droite est réglé sur le mode de conception. Et vous pouvez le voir ici en haut. Il existe également un mode prototype qui vous aide à rendre un design interactif. Nous ne nous concentrerons pas vraiment là-dessus, surtout dans la première partie. Et il y a aussi un troisième mode ici, inspectez. Cela vous donne un peu de code CSS et c'est essentiellement utile pour les codeurs. Maintenant, ce qui est important, c'est que vous respectiez le mode de conception. Okay, maintenant, la prochaine chose. Vous avez le niveau de zoom ici. Et c'est quelque chose que vous devriez constamment regarder. Le plus important, c'est ces raccourcis clavier ici, plus précisément en décalant un, Shift Z cependant. Vous n'avez pas besoin de vous en souvenir car vous pouvez toujours compter sur des contrôles qui grognent, mais sachez que cela est disponible ici. Et encore une fois, il est très important de zoomer sur le bon niveau de zoom. Ensuite, l'icône de lecture indique à quoi sert la présentation lorsque vous souhaitez vérifier votre conception sans aucune distraction, sans outils et autres. C'est également agréable lorsque vous avez un prototype interactif. Mais encore une fois, ce ne sera pas le cas ici au début. En continuant dans l'interface, il s'agit de votre avatar. Le mien est C pour la Kress. Sans plusieurs personnes dans un projet actif à la fois, vous verrez que j' ai des serviettes ici. Et enfin, le bouton Partager. Cela est vraiment utile lorsque vous souhaitez montrer votre travail, ou souhaitez-vous inviter d'autres designers à travailler avec vous sur le même fichier ? La fonctionnalité de partage est géniale car vous pouvez envoyer la conception sous forme de lien par e-mail ou autre, puis continuer à travailler dessus. Si vous envoyez le fichier PNG, c'est comme un instantané, et évidemment cela ne change pas. est donc préférable de partager le lien car vous pouvez continuer à travailler dessus. Au moment où le client ouvre le lien, vous avez peut-être résolu le gros problème. Ok, au milieu de l' interface, en haut, vous trouverez quelques icônes, sont très puissantes et les utiliseront beaucoup. Comme toujours, il y aura des conférences distinctes à leur sujet. Enfin, sur la gauche, il y a un onglet appelé « actifs ». Ce que nos utilisateurs veulent tirer le meilleur parti de Figma. C'est très important. Mais si vous avez eu le début, pas tellement. Je vais tout expliquer plus tard. Sachez simplement que nous avons un onglet distinct ici. Pas de portail. Désormais, n'importe quel design peut être divisé en plusieurs pages. Ceci est utile lorsque vous avez un grand projet avec des dizaines, voire des centaines d'écrans. Pensez à un projet de conception Web avec 20 pages plus la version tablette, plus la version mobile, puis une application Android, puis sur une application iOS, c'est un projet énorme, alors vous le faites J'ai besoin d'un moyen de l'organiser. Eh bien, vous pouvez le faire à travers des pages. Pour être honnête, il existe plusieurs façons d'organiser d'énormes projets, mais les pages en font certainement partie. Bon, maintenant prenons du recul et concentrons-nous sur l'essentiel. La force principale de Figma, ce qui rend Figma fantastique, c'est sa capacité à faire évoluer votre travail. Avec ces outils de base et quelques fonctionnalités avancées, vous pouvez créer un mode de travail qui vous permettra créer rapidement des dizaines d'écrans. C'est la vraie puissance de Figma, la capacité de créer grands projets sans aucun mal de tête, en toute simplicité. Pour les débutants, encore une fois, ce n'est pas si important. Nous ne créerons pas de projets de 100 pages dans ce cours, mais il est préférable que vous connaissiez les points forts de Figma dès le début. Encore une fois, Uber l'utilise, gauche l'utilise. Et d'autres grandes entreprises sont des grosses casseroles ou des Pigma. Mais pour nous, c'est vraiment très important. D'accord, cela étant dit, continuons. 9. Créez votre premier mini site Web: Bienvenue de retour. Nous avons une activité pratique où je veux que vous suiviez mes étapes lors de votre deuxième visionnement. La première fois, s'il vous plaît, regardez et comprenez comment j' aborde cet exercice. La deuxième fois que vous regardez la vidéo en pause aussi souvent que vous avez besoin de travailler. vous plaît, n'essayez pas de travailler le long de la première visite. L'objectif est de créer un mini site Web en utilisant tous ces éléments. Le plus important, s'il vous plaît, amusez-vous avec ça. Aucune pression du tout. Je sais que c'est très tôt dans le cours, mais je veux vous montrer à quel point c' est facile si vous avez la bonne approche. Commencez à partir du panneau Calques. Remarquez ce que nous avons ici, un logo, quelques éléments pour le menu principal, un fardeau, une photo, un arrière-plan du menu principal, etc. Les choses sont donc assez organisées. Commençons par le logo. Où nos logos sont généralement placés sur la plupart des sites Web. Est-ce en haut à droite ? Est-ce en bas ? Non, bien sûr que non. Le logo est généralement placé ici en haut à gauche. Cliquez donc dessus pour le sélectionner et faites-le glisser à l' endroit exact. Eh bien, ce n'est pas vraiment important pour le moment. Bon, qu'en est-il du menu principal ? Où trouvez-vous habituellement cela ? Si vous n'êtes pas sûr, ouvrez simplement votre navigateur et consultez quelques-uns de vos sites Web préférés. Habituellement, le menu principal se trouve à droite du logo. S'il vous plaît, déplacez-les un par un, comme ça. Et vous remarquerez que la stigmatisation est entraînée pour nous aider à résoudre ces lignes rouges et c'est très bien de travailler de cette façon. Prenez votre temps avec ça. Pas de pression. Une fois que vous les avez grossièrement disposés, quelque chose comme ça, cliquez n'importe où sur la surface Y et faites glisser une boîte. Ok, c'est ainsi que nous pouvons tous les sélectionner. Maintenant, vous pouvez voir que c'est le cas dans le panneau Calques. Vérifiez ça deux fois. Ok, utilisez cette icône ici pour les aligner en bas. Cela les organise rapidement. C'est un peu plus rapide. Ok, encore une étape, cliquez ici, et vous aurez une option qui s'appelle une idée, ce qui signifie essentiellement la nettoyer pour moi. Et juste comme ça, le menu principal est assez joli. Si vous voulez vraiment être exact, vous pouvez le faire. Éloignez-le du chemin. Au fait, sélectionnez à la fois le logo et le menu principal. Et maintenant, vous pouvez utiliser cette icône ici, qui centre alors c'est facultatif, mais cela la rend un peu meilleure. Ensuite, sélectionnez le rectangle blanc et déplacez-le vers le haut. Ce gris ne fonctionne évidemment pas très bien. Allons donc du bon côté et il va chercher quelque chose d'un peu plus agréable. J'aime les couleurs vives. Je pense donc que je vais aller avec celui-là par exemple. C'est mieux, mais il est évident qu'il y a maintenant un bon texte. D'accord. Voici donc ce que nous pouvons faire. Sélectionnez tous ces éléments comme ça. D'accord, du côté droit, cherchez cette nuance grise. Le voilà. Cliquez dessus et ouvrez le sélecteur de couleurs, ce qui devrait être assez facile à utiliser. White va être bien meilleur. Et en effet, c'est génial. Fermez ce panneau et centrez-les une fois de plus pour une mesure sûre. Utilisez cette icône ici. Si vous ne savez pas lequel est le cas, il suffit de les essayer, puis d'utiliser Control Z pour annuler. explorer. Soyez curieux, c'est ça l'essence. D'accord, pour le bouton, déplacez le texte à l'intérieur. Si vous regardez attentivement, vous verrez Figma. Nous allons essayer de vous aider LK. Lorsque c'est fait, sélectionnez le rectangle et ouvrez le sélecteur de couleurs une fois de plus. Nous voulons la même couleur. Remarquez que Figma saute à nouveau à notre aide. Nous avons l'option ici. Mais si vous ne pouvez pas le voir, vous pouvez également utiliser cette icône ici. Cliquez sur le menu principal, et c'est à peu près cela. Nous avons la même couleur, mais qu'en est-il du texte ? Eh bien, nous devons le rendre blanc. Bien sûr, il n'y a pas d'autre option décente. D'accord ? Les choses se passent bien. Ok, sélectionnez l'image et faites-la apparaître. Assurez-vous de voir l'ensemble du cadre afin de l'aligner correctement. C'est parfait. D'accord. Nous devons gérer le titre et la description. Pour le titre, veuillez modifier sa taille à 40 pixels. Mais c'est pour le Z. Maintenant, nous pouvons le voir beaucoup mieux car la couleur blanche est. Le blanc se trouve toujours en haut à gauche du sélecteur de couleurs. Va jusqu'au coin de la rue. Vous savez, c'est blanc pur. Si c'est écrit FF, FF, FF ici. Donc Fs pour les autres textes, 18 pixels s'il vous plaît, c'est 18, et s'il vous plaît, rendez-le blanc aussi. Maintenant, je sais que cela peut sembler rapide, mais je veux vous montrer comment les choses se mettent en place. La dernière chose, c'est que ces objets sont partout. Où devrions-nous les déplacer ? Eh bien, le meilleur endroit est juste ici, sur le côté gauche. Déplacez le Paypal jusqu'à ce que vous voyiez une ligne verticale rouge qui monte vers le logo. C'est ce que nous voulons. Cf. C'est parfait. Faites de même avec l'autre calque FX. Prenez votre temps avec ça. J'espère que vous regardez ça sur un ordinateur et j'espère que vous travaillez avec moi. Enfin, avec le fardeau, il suffit de le mettre en place un à la fois. C'est tout à fait très bien. Et dans l'ensemble, il s'agit de notre mini site Web. Voici ce que je veux que vous vous souviez. Vous n'avez pas besoin d'être créatif. Vous devez connaître les règles. L'un d'eux est que l'alignement des choses est très important. Je sais que c'est peut-être ennuyeux, mais c'est essentiel pour le logo et le menu principal, pour le fardeau, pour l' alignement de ces calques. Ce sont tous des éléments très importants. Voici à quoi ça ressemblerait sans la doublure. Juste un coup d'œil sur la façon dont cela ressemblerait sans aucun alignement. Donc, tout va bien, ça a l'air horrible. Encore une fois, le principe est assez basique mais puissant. Alignez tout, utilisez l' alignement deux mondes, ok, en termes de couleur, nous avons choisi une couleur vive et le reste était blanc pur. Blanc pur, ni jaune, ni vert, rien d'autre. Juste blanc pour la couleur principale. Il n'aurait pas de sens de choisir quelque chose comme ça, n'est-ce pas ? Tout doit avoir du sens. Le titre est plus grand que la description car il doit se démarquer. Voilà donc quelques-uns des principes sur lesquels s'appuieront. Nous en parlerons en détail dans d'autres conférences. Mais pour l'instant, s'il vous plaît, dites-moi, si vous avez besoin d'être créatif pour faire ce genre de choses en moins de 10 minutes. Nous avons créé un mini site web, et tout était basé sur quelques principes. Alignez correctement les choses, utilisez bonnes couleurs, utilise une mise en page standard. Le logo à gauche, le menu principal à droite, etc. C'est ainsi que nous allons travailler. Nous ne dessinerons pas, nous ne dessinerons pas, nous ne serons pas créatifs. Nous apprendrons des principes clés tels que l'alignement, la symétrie, topographie, le contraste, et nous créerons ensemble des choses extraordinaires. C'est parce que c'est ce dont le client a besoin. C'est ce qui va vous faire embaucher et cela va mettre de l'argent sur votre compte bancaire. Veuillez maintenant faire une pause, revenir en arrière et vous mettre au travail. Je veux voir votre version avec une couleur différente. Je sais qu'il est un peu tôt, mais croyez en vous-même, vous pouvez le faire. Je suis là pour aider autant que possible. Relevez cela comme un défi amusant. À la fin, cliquez sur le cadre, puis choisissez Exporter. Ensuite, Exportez une fois de plus, téléchargé, et c'est tout. Merci beaucoup et je cherche ça plutôt que de voir ton design. 10. Modifier des icônes : couleurs et taille: Bienvenue dans un exercice. Ce fichier s'appelle les icônes d' édition et vous l'avez joint dans le dossier des ressources. Pour rappel, accédez à l'onglet Accueil, puis cliquez sur cette icône pour importer dans le fichier Figma. Travaillons sur ce jeu d'icônes que nous connaissons déjà. Dites que vous voulez le redimensionner, n'est-ce pas ? Si vous saisissez simplement une poignée d'angle et que vous commencez à faire glisser, regardez ce qui se passe. L'icône devient plus grande et si vous maintenez la touche Maj enfoncée, elle s'agrandit proportionnellement. Mais remarquez qu'il s'amincit. Et si vous le rendez plus petit, la taille est plus petite, elle devient plus épaisse. Et c'est une très bonne chance vous ne vouliez pas que cela se produise. Voici donc la solution. Concentrez-vous sur le côté supérieur gauche de l'écran et cliquez sur cette petite flèche. Cela va révéler l'outil de mise à l'échelle. C'est ce que nous voulons utiliser l'outil de mise à l'échelle. Nous pouvons maintenant le redimensionner rapidement sans aucun problème. Las ne maintient pas la touche Maj enfoncée car Figma nez, nous voulons redimensionner tous les éléments proportionnellement. Laissez-moi annuler et je vais vous montrer comment cela fonctionne sur plusieurs icônes à la fois. Sélectionnez-les, puis redimensionnez. Ça fonctionne comme un charme. La prochaine chose, c'est changer de couleur. Avant d'en arriver là, je veux parler de quelque chose qui est un peu ennuyeux. J'ai téléchargé ces icônes sur le Web et il est très probable que vous allez faire la même chose encore et encore. Les concepteurs Web ne créent pas réellement d'icônes à partir de zéro. Et notez que cela peut paraître bizarre, mais permettez-moi d'expliquer pourquoi c'est le cas lors d'une conférence distincte. Sachez simplement que vous n'êtes pas censé créer ces icônes par vous-même à partir de zéro. Parce que nous allons télécharger des icônes depuis le Web. Cela signifie que nous utiliserons travail des autres et que tout le monde travaille différemment. Si vous demandez à 10 personnes de faire de vous un exutoire, vous verrez différentes façons de le faire. Et c'est la même chose ici à Figma. Si vous regardez dans le panneau Calques, vous remarquerez que ces icônes ont un symbole particulier. Ce n'est pas ce dont je veux parler. Cliquez ici à gauche de ce symbole et vous ouvrirez cet élément. Comme vous pouvez le constater, l'icône de la poubelle est en fait composée de quatre éléments. Ces deux lignes verticales, le contour plus la ligne horizontale de la piste. Eh bien, passons à l'autre. Il y a un symbole différent. Il s'agit d'un groupe. Encore une fois, ce n'est pas l'important. Mais si nous l'ouvrons, c'est le lit essentiel. On verra beaucoup d'autres choses, plus de groupes et quelques vecteurs. Et nous pouvons ouvrir l' un de ces groupes. Mais voici un autre groupe, mon Dieu. Voici donc l'idée essentielle. Chaque designer travaille différemment. Ne vous attendez pas à ce que les icônes soient construites d'une certaine manière. Certaines icônes peuvent comporter deux ou trois éléments, d'autres peuvent en contenir 20 ou 30. n'y a pas de bonne ou de mauvaise façon de le faire. Bon, maintenant, revenons aux icônes de coloriage. Je voulais juste éviter cela parce que je suis sûr que vous allez rencontrer les différents types d'icônes. D'accord. Si nous cliquons simplement sur la corbeille Dan, nous pouvons voir qu'il y a une nuance grise en bas à droite au cas où vous ne le verrez pas, déplacez votre curseur dans ce panneau, puis faites défiler vers le bas. Cela signifie que nous pouvons cliquer dessus et modifier l'icône entière de la même façon. C'est une autre couleur. Permettez-moi d'annuler le contrôle Z. Parce que nous avons accès à chaque bloc de construction, nous pouvons en sélectionner un, dire le contour, et uniquement modifier cette couleur. Et voilà que tu y vas. Maintenant, pour cette poubelle, cela n'a pas l'air vraiment génial pour être honnête, mais essayons la bulle de la parole. Ouvrez-le et sélectionnez le contour. Changez ça par tout ce que vous voulez. , je suis content de n'importe quelle couleur aléatoire. Ensuite, je vais sélectionner les vecteurs 6 et 7. Je vais maintenir la touche Ctrl enfoncée pour les sélectionner tous les deux en même temps. Maintenant, je peux changer leur couleur pour dire à celle-ci, par exemple, juste au hasard. Bon, d'accord, c'est génial, mais faisons une pause un peu. Faisons un récapitulatif rapide. Si vous souhaitez redimensionner correctement les icônes, vous devez utiliser l'outil de mise à l'échelle. N'oubliez pas de revenir à l'outil de déplacement, soit dit en passant, raccourci clavier V, si vous souhaitez modifier la couleur d'une icône, vous pouvez modifier l'ensemble, ou vous pouvez effectuer une exploration vers le bas dans le panneau des calques et sélectionner certaines des ses éléments constitutifs et les modifient. Avant de vous laisser essayer celle-ci, voici d'autres icônes. Sélectionnez le premier et avez ignoré tous ces calques et groupes dans le panneau Calques. Au lieu de cela, concentrez-vous ici. Notez que nous avons trois couleurs affichées et nous avons cette option pour charger 11 autres couleurs. Voici maintenant l'idée essentielle. Vous pouvez décider de la couleur que vous souhaitez ajuster et simplement cliquer sur la nuance. Disons que vous n'aimez pas la couleur vert clair. Pas de problème. le sélecteur de couleurs et commencez à jouer avec lui. C'est aussi simple que ça. Laissez-moi défaire et vous montrer quelque chose de vraiment cool. Disons que nous ouvrons toutes les couleurs et que vous n'êtes pas vraiment sûr que ce gris foncé soit utilisé. D'accord, ce n'est pas un problème. Il suffit de déplacer votre souris ici et de cliquer sur cette icône cible. Et exactement comme ça, Figma pointera vers cette couche spécifique. Encore une fois, vous ouvrez cette zone et si vous ne savez pas où cette couleur est utilisée, cliquez sur l'icône cible. Bon, voici une dernière technique avant votre tour. Ces icônes proviennent du même ensemble. Disons que nous ne sommes pas fans de cette couleur jaune et dorée. On veut peut-être qu'il soit violet. Bon, pas de problème. Tant qu' ils sont tous sélectionnés, cliquez sur la nuance et modifiez-la. N'est-ce pas génial ? J'ai adoré ce genre de choses. L'idée principale est d'expérimenter. n'y a pas de bonne ou de mauvaise façon. Vous voulez juste vous amuser à ce stade. Veuillez donc ouvrir ce fichier et modifier ces deux jeux d'icônes. Faites ce que vous voulez avec eux. Et lorsque vous avez terminé, sélectionnez-les tous et cliquez sur le bouton Exporter. Amusez-vous bien et publiez votre travail. Merci. 11. Voici pourquoi autant de débutants abandonnent: Bonjour et bienvenue. Parlons de quelque chose qui est un peu sensible. Beaucoup de débutants abandonnent leur apprentissage lorsqu' ils rencontrent un problème. Quand ils ne comprennent pas quelque chose, ils sont frustrés. Et je comprends ça. Et je fais de mon mieux pour simplifier les choses et fournir autant d'aide que possible sur le serveur de discours. Mais dans Figma, c'est parfois très difficile et je veux vraiment y remédier. Permettez-moi de vous montrer un exemple rapide. Vous n'avez pas à travailler, j'ai juste essayé de comprendre mon point de vue sur le fait d'être frustré. Donc voici, vous pouvez organiser un projet en pages, d' accord, disons que nous travaillons à une refonte du site Web. Nous pouvons avoir une page pour les filaires, une autre pour la version de bureau, évidemment, c'est nécessaire et cela va être séparé. Un autre pour la version mobile, n'est-ce pas ? Parce que, encore une fois, cela devrait être séparé. C'est maintenant une façon d'organiser un projet en deux pages. Il suffit de cliquer ici pour agrandir ou fermer cette zone. Et lorsqu'il est développé, vous pouvez ajouter des pages en cliquant sur ce symbole plus, puis vous pouvez le renommer. D'accord ? Encore une fois, toutes ces pages font partie d'un seul projet avec une seule entreprise. D'accord ? Comment nommer vos pages dans, comment organiser les choses à l'intérieur d'elles. C'est tout à fait à vous de choisir. Maintenant, supposons que vous compreniez comment les pages fonctionnent jusqu'à ce stade, même si vous ne l'avez pas complètement, il suffit de rester avec moi. Ok, c'est là que ça devient difficile, tue un projet que j'ai téléchargé depuis l'onglet Communauté. Découvrez ça. Nous avons tellement de pages, une simple page de couverture, puis un guide qui comporte huit cadres. Vous pouvez les voir ici. Mais ensuite, une autre page, quatre composants, puis une page qui sert de séparateur ici pour aider à organiser les choses. Ensuite, il y a un accordéon avatar, bannière et ainsi de suite. Il y a des dizaines de pages. Cela va faire tourner la tête. C'est pourquoi les débutants abandonnent. Lorsque les choses deviennent si compliquées, vous vous sentez simplement débordé et frustré. C'est pourquoi je veux prendre un moment et vous dire que ce niveau d' organisation des choses pour les professionnels, pour les utilisateurs de puissance, pour ceux qui le font déjà pour les vivants. Et ils veulent maximiser le temps. Si vous travaillez chez Uber , sur le mobile ou chez HB, c'est ainsi que vous devez configurer les choses. Mais voici le truc. Si vous voulez simplement gagner quelques milliers de dollars par mois ou si vous souhaitez redessiner votre propre site Web, ce type de choses n' est pas nécessaire. Vous n'avez pas besoin d'entrer dans ce niveau de détail. Je vous promets que ce n'est pas l'essentiel. Fais-moi confiance. L'idée est que cela couvrira certaines fonctionnalités avancées de Figma comme ce type d'organisation. Mais mon plan est de vous amener à marcher avant de courir. Si nous nous concentrons sur les choses les plus avancées de Figma, il est fort probable que vous allez abandonner. Et je veux être aussi clair que possible, ces fonctionnalités avancées. Ils ne feront pas de vous un bon designer. Je vais le répéter encore. Ces techniques et flux de travail avancés ne sont pas une grande partie de votre fondation en tant que concepteur Web, ces choses fantaisistes sont les cinq ou 10 %, la cerise sur votre gâteau. Ne vous inquiétez pas si vous ne comprenez pas quelque chose de ce cours, continuez à regarder et je vous promets que vous allez l'obtenir. Et si vous ne venez pas le serveur Discord et parlons-en en temps réel. Encore une fois, cet accord est un salon de discussion comme WhatsApp ou Facebook Messenger, mais il n'est pas privé. C'est avec un groupe d' autres élèves qui vivent tous la même chose que vous. Assurez-vous donc de rejoindre le serveur. C'est totalement gratuit. Et si vous ne voulez pas faire cela, posez simplement des questions sur la plateforme et je vais éclaircir les choses. Rappelez-vous, c'est bien de ne pas tout comprendre dès le départ. Regardez au moins la moitié du cours et vous verrez que tout commencera à avoir beaucoup plus de sens. Merci d'avoir eu des patients, et j'espère que vous une expérience d'apprentissage cinq étoiles jusqu'à présent. S'il vous plaît, écrivez-moi ou la vue. Cela m'aide vraiment à me faire sourire. D'accord, continuons. Merci beaucoup. 12. La plus grande différence de Figma et d'autres programmes: Bienvenue de retour. Permettez-moi de vous dire ce que je crois être l'une des plus grandes choses auxquelles vous devez vous habituer dans Figma, dire que vous voulez ajouter un bouton, n'est-ce pas ? Comment faites-vous généralement cela ? Disons que dans Photoshop ou Adobe XD, ce que la plupart des autres programmes de conception, vous obtenez généralement l'outil Rectangle et que vous faites glisser une forme comme ça. , s'il vous plaît, ne travaillez pas le long. Ensuite, vous obtenez le manuel ou l' outil Type et vous ajoutez quelque chose. Enfin, vous sélectionnez les deux calques, puis vous utilisez les outils d'alignement pour centrer le texte à l'intérieur de la forme. En prime, vous pouvez regrouper ces deux couches dans un dossier pour garder les choses organisées. Maintenant, cela peut vous paraître naturel, mais cela n'aide pas Figma à travailler. Vous ne devriez pas travailler comme ça. En fait, si vous voulez montrer aux gens que vous n'avez pas utilisé Figma du tout, c'est un cadeau clair. Cela indique aux gens que vous ne savez pas comment utiliser Figma. Voici comment travailler réellement avec des cadres, non avec des rectangles ou des groupes. Permettez-moi de vous donner un exemple. Voici un cadre, 1920 par 1080. Supposons que nous avons lancé un projet de conception Web et que nous avons besoin de l'en-tête du menu principal. Sélectionnez l'outil cadre et ajoutez-en un dans cette région, juste au-dessus de ces deux couches. Ce n'est pas parfait. Et il est probable qu'il n'y aura pas de parfait. N'hésitez pas à vous déplacer sur les bords et à les redimensionner en place. À partir de là, allez à remplir et cliquez n'importe où dans cette région. Dans le sélecteur de couleurs, choisissez la forme que vous souhaitez. C'est ainsi que Figma fonctionne le mieux. Vous pouvez cependant vous demander pourquoi. Pourquoi devons-nous utiliser des cadres ? Maintenant, pour rester court ? Cela vous aide à mieux contrôler vos éléments de conception et il est également plus facile de créer des versions réactives. Cela va également vous aider dans votre prototypage, animation de la conception le fait essentiellement lorsque vous voulez rendre vos écrans interactifs sans aucun codage. Donc les cadres, meilleur danseur, je sais que cela peut sembler un peu bizarre parce que vous pouvez penser que les cadres sont exactement comme des tableaux d'art de Photoshop ou Adobe XD, mais ce n'est pas le cas. Et une autre chose, vous pouvez mettre un cadre à l'intérieur du cadre. C'est normal dans Figma et c'est la façon recommandée travailler dans d'autres programmes n'est pas le cas. L'idée essentielle est donc la suivante. Pour la plupart de vos éléments de conception, utilisez des cadres, pas l'outil Rectangle. Très proche de cette idée. Veuillez ne pas utiliser de groupes. Il n'est pas nécessaire de créer des groupes car nous disposons d'une manière plus intelligente d'organiser tous les éléments. Eh bien, vous venez de voir en est un exemple. Nous avons ajouté le cadre au-dessus ces deux calques de texte et maintenant ils sont à l'intérieur. Donc, si nous voulons déplacer le tout, vous pouvez saisir le cadre et faire ce que vous voulez. Comme vous pouvez le constater, tout se déplace sans le groupe. Je vais vous montrer beaucoup plus d'avantages au fur et à mesure que nous continuons. Mais je voulais être aussi clair que possible, des cadres, pas des rectangles et des groupes. Enfin, nous avons ajouté un cadre de film. Mais notez que cela ne crée pas réellement de calque distinct dans le panneau Calques. Nous n'avons que le cadre et ces calques de texte. C'est un peu bizarre si vous venez d'autres programmes de conception, mais vous vous y habituerez bientôt. Faisons une courte pause. 13. Voici comment vous créez des boutons dans Figma: Bienvenue de retour. Je vous ai dit que les cadres sont la meilleure façon de faire dans Figma, pas des rectangles ou des groupes. Allons tout droit pour que je puisse vous montrer comment vous êtes censé travailler pour créer le bouton et Pigma. OK. Prenez l'outil de texte. Oui, tu as entendu ça, non ? C'est la première étape. Tapez ce que vous voulez. Je vais dire mon bouton. Ensuite, vous avez deux choix principaux. Vous pouvez cliquer dessus avec le bouton droit de la souris et choisir Ajouter une disposition automatique. C'est donc la première option. Bien que la mise en page, ou ce que la plupart des gens font nos jours, c' est la même chose. Encore une fois, vous ajoutez vos balises, puis vous appuyez sur Maj, allez dans le panneau de droite et cliquez sur le remplissage. La couleur par défaut est le blanc. Ouvrez donc le sélecteur de couleurs et remplacez-le par tout ce que vous voulez. C'est le fondement de votre fardeau. C'est comme ça que vous êtes censé travailler, n' est pas si gris en ce moment, mais donnons de la vie dedans. Les bords carrés sont ennuyeux, alors arrondissons-les. Cela se fait en utilisant cette partie ici. Allons-y avec une valeur élevée. Disons 25. Peut-être n'aimez-vous pas la couleur ou peut-être que le texte n'a pas de sens. Il n'y a pas de problème à changer. Vous pouvez simplement cliquer ici sous les couleurs de sélection. Vous avez cette option disponible. Si le cadre est sélectionné, oubliez pas d'appuyer sur la touche Echap pour le fermer. Vous pouvez également utiliser le panneau Calques. C'est également une option. Cliquez ici pour agrandir le cadre et vous pouvez maintenant sélectionner le texte. Certaines personnes trouvent étrange qu'il n'y ait pas de calque d'arrière-plan. n'y a pas de rectangle en soi. Vérifiez le panneau des calques pour cela, n'est-ce pas ? Il n'y a que le calque de texte et c'est parce qu' un remplissage est appliqué au cadre lui-même. Considérez ça comme une sorte. Donc aucun calque individuel pour le remplissage n'est totalement normal et Figma, maintenant la question est pourquoi devrions-nous utiliser shift ils donc bien que la mise en page sans fardeau, eh bien, nous avons quelques caractéristiques intéressantes. Tout d'abord, sélectionnez le calque de texte et augmentez sa taille, disons 30 pixels, n'est-ce pas ? Remarquez comment le rectangle grandit en taille. C'est une chose. C'est donc un des avantages de l'utilisation de la mise en page automatique, le cadre change automatiquement sa taille. Ensuite, veuillez sélectionner le cadre. Il s'agit d'une étape très importante. Sélectionnez donc le cadre. Et à partir de cette partie appelée Mise en page automatique, veuillez modifier cette valeur à 20. C'est ce qu'on appelle le rembourrage et c'est l'espace vide à l'intérieur du fardeau. Plus le rembourrage est grand, plus le bouton est grand. Si vous utilisez une valeur très petite, comme une ou deux, ce texte va devenir étouffé et nous ne voulons pas cela. Mais si nous utilisons des valeurs plus importantes, comme par exemple, notre bouton sera non seulement large, mais il sera également grand. Et ce n'est pas génial. Voici donc ce que nous pouvons faire. Cliquez ici sur cette icône vers la droite. Cela vous permet d'ajuster le rembourrage de tous les côtés individuellement avec 24 champs supérieur et inférieur et de laisser ce que pour les côtés. OK. C'est beaucoup plus comme ça. C'est un bouton. C'est donc un autre avantage de l'utilisation de la mise en page automatique, mais ce n'est pas fini. Voir cette icône bleue ici. Cela nous indique où le calque de texte est placé pour y donner un sens, agrandissez-le depuis le coin inférieur droit. Remarquez comment le texte reste en haut à gauche. C'est ce que cela contrôle. Et nous pouvons le déplacer ici, par exemple, ou ici. Mais évidemment, nous voulions juste ici, au milieu, juste comme ça. Cela signifie donc que nous avons beaucoup de contrôle sur le fardeau. Cela signifie que nous n' avons pas à utiliser constamment les outils d'alignement sur un rectangle plus un calque de texte. C'est pourquoi l'utilisation de cadres est tellement meilleure. Refaisons-le, cette fois avec une icône à ma source incontournable pour les icônes est plate icon.com. Mais sachez que cela nécessite un abonnement. Ce n'est pas gratuit. Le format que nous recherchons est SVG. Cela fonctionne mieux avec Figma. Au fait, l'icône est attachée, alors n'hésitez pas à la glisser et à la déposer. Maintenant, vous voudrez peut-être le redimensionner un peu. Je vais rapidement couvrir ça. Bon, maintenant, voici le pari essentiel. Si nous cliquons sur le bouton maintenir et le faire glisser ici, vous pouvez voir qu'il y a un surlignement. Faisons en sorte que cela se produise. Et voici la magie. Nous pouvons contrôler la distance entre l'icône et le calque de texte en sélectionnant le cadre. Maintenant, à partir de la droite dans n'importe quelle valeur que vous souhaitez, disons 15. Des trucs géniaux, c'est génial. Laissez-moi refaire ça. Je vais faire glisser l'icône une fois de plus dans Figma et je vais la réduire. Ensuite, je vais donner l'outil de type et écrire quelque chose ici. Maintenant, sélectionnez les deux couches et appuyez sur Maj a. Il y a des chances que l'alignement ne soit pas correct. Mais ouvrez le rembourrage et centrez-le. Des trucs adorables. C' est assez facile, mais veuillez travailler sur votre deuxième visionnage pour suivre le rythme. Ok, maintenant ajoutons un remplissage et faisons de la couleur aléatoire. Je vais assez vite, mais vous devriez bien sûr prendre votre temps avec ça. Veuillez maintenant ajuster les coordonnées de cette partie ici. Utilisez la valeur souhaitée pour changer l'icône et le texte en blanc. Je vais le faire à partir des couleurs de sélection. Encore une fois, le cadre est sélectionné. Maintenant, pour la distance, allons-y avec quelque chose comme 20. Et pour le rembourrage, je pense que je vais utiliser quelque chose comme 34 sur les côtés. Mais c'est fou. Et puis pour le haut et le bas, et c'est notre fardeau. Bien sûr, il y a beaucoup plus de choses que nous pouvons faire, mais passons étape par étape. Veuillez suspendre le cours et créer vos propres boutons. Je veux que vous changiez le rayon des coins, le rembourrage, les couleurs, et peut-être que vous essayez d' autres icônes. Lorsque vous avez terminé, sélectionnez le grand cadre et exportez-le. Si vous avez plus de trois boutons. Si vous n'avez qu'un ou deux boutons, vous pouvez les exporter individuellement. Pour ce faire, tout comme les cadres et cliquez sur Exporter. Il y a aussi une feuille de triche jointe juste au cas où vous voudriez passer rapidement en revue ce que j'ai abordé dans cette conférence. N'oubliez pas, amusez-vous bien avec ça. n'y a pas de pression. Il suffit d'essayer les choses. 14. Les bases de travailler avec la couleur: Bienvenue de retour. Permettez-moi de vous montrer comment vous pouvez travailler avec les couleurs dans Figma, les points essentiels, d'ailleurs, lors de la prochaine conférence que nous aborderons des choses plus avancées. Commencez par n'importe quel cadre aléatoire. À ce stade, vous savez, vous pouvez utiliser la zone de remplissage pour contrôler la couleur de cette image. Il n'y a pas de différence entre le remplissage de ce cadre et le remplissage d'un rectangle, par exemple, permettez-moi d'en ajouter un. Veuillez ouvrir le sélecteur de couleurs pour que nous puissions explorer cette partie. Le côté supérieur gauche est blanc pur. C'est FF, FF, FF. Donc, six F au total. Et de l'autre côté, nous avons du noir pur et c'est six zéros, 0000, 0000, 0000. Pourquoi est-ce que je vois ces personnages ? Ceux-ci constituent le code hexadécimal. Le code hexadécimal est ce que les développeurs Web utilisent pour faire de nos conceptions un site Web entièrement fonctionnel. Vous ne leur dites pas que vous voulez la couleur bleu foncé pour le bouton. Au lieu de cela, vous dites que vous voulez faire 0 six, CA. Vous pouvez voir qu'il s'agit d'un code hexadécimal parce qu'il le dit ici. Je n'ai jamais rien utilisé d'autre à des fins de conception Web. Si votre client possède un code couleur spécifique pour sa marque, par exemple, DHL est célèbre pour son jaune. Vous pouvez le taper dans FFC, voir 0000, exactement comme ça. Et si vous recherchez des jeux de couleurs sur le Web, vous pourrez obtenir des codes hexadécimaux pour chaque couleur. Il suffit de les taper sur les coller avec Control V. Ensuite, vous pouvez réduire l'opacité en utilisant ce curseur ici, bien que je ne vous recommande pas de le faire souvent. Ce n'est pas une bonne idée. Maintenant, permettez-moi de fermer cela et d' ajouter le roman, la forme. Voici le truc. Une fois que vous avez défini une couleur, nous pouvons la voir ici dans les couleurs du document. C'est gros que j' essaie de nous aider. Si nous rendons celle-ci rouge et que nous voulons ajouter la troisième forme, par exemple, supposons que cela allait se produire. Cette montre-bracelet sera ajoutée ici qu'elle ne l'est. Et si nous cliquons, elle prendra cette couleur. En parlant de cela, c'est ce qu' on appelle l'outil compte-gouttes, et il vous aide à sélectionner les couleurs de n'importe où sur la toile. Comme vous pouvez le constater, il y a un effet grossissant en haut à droite. C'est Figma, ce n'est pas moi qui monte cette vidéo. Cela vous aide donc à choisir les couleurs avec précision. Cela fonctionne très bien sur les photos, mais nous aurons le temps de l' explorer plus tard. Passons à ce bar ici. Jusqu'à présent, nous avons travaillé avec des couleurs unies, mais vous pouvez également ajouter des dégradés. Le fait est que cette linéaire est la seule que je recommande. Les autres, je les utilise peut-être moins de 5 % du temps. Avec un dégradé linéaire, vous obtenez deux extrémités que vous pouvez contrôler. En ce moment, je travaille là-dessus. Quand j'ai fini, je peux passer à celui-ci collecté et maintenant je peux jouer avec elle au cas où il serait à moitié plein, suffit d'augmenter l' opacité comme ça. Veuillez zoomer et jouons avec ce dégradé. Maintenant, pour être honnête, tous ces ajustements, comme l'ajustement de la transition ici et tout cela. Eh bien, vous n'allez pas le faire si souvent. C'est la vérité. Mais je veux que vous sachiez que vous avez un contrôle total sur ce qui se passe ici. Par exemple, vous pouvez ajouter une troisième couleur. Voyez ce carré vide. Si vous cliquez sur, vous allez ajouter un autre point coloré. Et si vous souhaitez le supprimer, cliquez simplement dessus, puis appuyez sur la touche Supprimer. Encore une fois, vous n'allez pas faire cela tout ce qui s'est ouvert dans les projets de conception Web, mais sachez qu'il est disponible. Une dernière chose, vous pouvez changer l'angle du dégradé comme ça. Il suffit d'attraper une extrémité , puis de la déplacer. Maintenant, pour être honnête, vous n'utiliserez que deux types de dégradés ici. Maintenant, dans la plupart des projets de conception Web, vous allez utiliser deux types de dégradés, verticaux et horizontaux. Ce sont les deux seuls qui sont réellement utilisés dans conception Web moderne pour s'assurer que le dégradé est parfaitement droit. J'aime l'aligner sur l' un de ses bords sorte que la dernière option dans ce menu déroulant est l'image. Lorsque vous cliquez dessus, vous obtiendrez ce motif à carreaux. Cela signifie que vous pouvez faire glisser une année d' image et cette partie, ou cliquer ici pour accéder à la fenêtre de navigation. génial, c'est que vous disposez de curseurs pour ajuster l'image. Pour être juste, ce n'est pas exactement Photoshop, mais c'est plus que suffisant pour la plupart des gens. Encore une fois, c'est vraiment génial. Mais revenons à utiliser les couleurs. génial dans cette partie, c'est que vous pouvez ajouter un autre remplissage au-dessus de cette image. Il suffit de cliquer sur le symbole Plus. Par défaut, l'opacité est réduite à 20 %. Et c'est ainsi que vous pouvez ajouter que nous sommes l'image ou encore mieux ajouter le dégradé. Par exemple, imaginez que vous souhaitiez ajouter du texte blanc en bas, mais peut-être que cette partie n'est pas assez sombre, donc vous ne pouvez pas vraiment lire ce texte blanc. Donc, pour le fixer dans le dégradé de haut en bas pour l' opacité, allez avec 80%. Vous voudrez peut-être l'ajuster afin que la partie supérieure ne soit pas affectée. Et dans l'ensemble, tout comme ça, vous avez un effet génial. Pour résumer, cela s'appelle le sélecteur de couleurs, et il s'agit du code hexadécimal. Vous pouvez saisir des codes couleur que vous pouvez obtenir sur le Web. Mais n'oubliez pas que c'est toujours six personnages. Sigma vous aide avec ces couleurs de document, mais ce n'est qu' après vous être engagé une application couleur que vous l'utilisez réellement. Vous pouvez réduire l'opacité d'une couleur à partir de là. Et vous pouvez changer le type de défaillance de cette partie ici, mes conseils s'en tiennent aux dégradés linéaires car ils ont l'air beaucoup mieux. Vous pouvez empiler plusieurs couleurs en utilisant ce symbole plus ici. Et vous pouvez également modifier l' opacité de cet endroit, 01. La dernière chose que j'ai oublié de mentionner, vous pouvez toujours vous cacher, vous le remplisserez en cliquant sur cette icône. Donc, si vous n'êtes pas sûr que votre dégradé est correct, éteignez-le et voyez ce qu'il y a. Et c'est l'essentiel de travailler avec la couleur. Voyons ensuite comment fonctionnent les pros. Je vous verrai lors de la prochaine conférence. 15. Comment travailler avec la couleur comme un pro: Bienvenue de retour. À ce stade, nous connaissons les bases de l'utilisation des couleurs dans Figma, mais voici comment passer au niveau supérieur. Dites que cette nuance de bleu est très importante pour le client, n'est-ce pas ? Imaginons juste cette affaire. Cela signifie que nous l'utiliserons probablement tout au long de la conception, n'est-ce pas ? Nous allons l'utiliser et beaucoup d'endroits. Maintenant, au lieu de se fier aux couleurs du document ou d'utiliser l'outil Pipette, voici ce que vous devez faire. le côté droit de Fell. Vous allez voir ces cercles complets. Cliquez sur cette icône et cela ouvrira les styles de couleurs. Actuellement, il n'y a rien ici, mais cliquez sur ce symbole plus à droite. Figma nous demande de le nommer et il nous montre même la couleur ici. Et comme ça, nous avons notre première couleur dans d'autres couleurs. Si vous la désélectionnez en cliquant sur une région vide, vous verrez que cette entrée se trouve en haut à droite. Maintenant, lorsque vous souhaitez utiliser la même couleur, ce soit sur un calque de texte, sur un cadre, sur le rectangle, partout où vous pouvez simplement cliquer ici, et cela révélera vos styles de couleurs. Cliquez dessus, et il va y avoir mort. Permettez-moi de le faire encore une fois. Vous pourriez vous demander pourquoi est-ce important ? Pourquoi est-ce si révolutionnaire ? Eh bien, la cohérence est essentielle. Vous voulez vous assurer d'utiliser exactement le même code couleur absolument partout. Dans un projet qui ne comporte qu'une page. Cela semble assez facile. Mais imaginez que vous ayez 20, 40, peut-être 100 écrans sur lesquels vous devez aller. C'est là que ça brille vraiment. Permettez-moi de saisir rapidement ces éléments. Effectuez l'outil de déplacement en faisant glisser une boîte, cliquez sur les cercles et choisissez l'un des styles. C'est ainsi que vous pouvez rapidement mettre à jour votre conception vraiment, très rapidement. Et si vous voulez changer les choses, il suffit de cliquer ici et de choisir l'autre. Simple et facile à obtenir. Maintenant, permettez-moi de passer à un billet gratuit depuis l'onglet Communauté. Ici, nous avons une application avec beaucoup de boutons, mais imaginez que nous venons de recevoir des commentaires et que ce soit de mauvais commentaires. Eh bien, voici comment vous devriez travailler. Je n'ai rien sélectionné pour le moment, donc je peux voir les styles de couleurs de ce fichier. Il y en a deux, le bouton principal et le bouton secondaire. Cliquez avec le bouton droit sur le premier et choisissez Modifier le style. Vous pouvez modifier son nom, sa description et ses propriétés, mais je souhaite modifier le code couleur. Cliquez ici et utilisez le sélecteur de couleurs. Lorsque vous en êtes satisfait, il suffit de le fermer et de voir comment mettre à jour rapidement tous ces écrans en une seule action. Et c'est un projet assez petit. Permettez-moi également de mettre à jour le vert. Donc, rien n'est bien choisi ? Ensuite, cliquez avec le bouton droit de la souris pour modifier le style en bas, cliquez ici pour afficher le sélecteur de couleurs. Et maintenant, tu peux faire ton truc. Bon, c'est le retour au projet initial. C'est ici que vous devez effectuer une mise à jour. voyez, vous ne devriez jamais appeler ces couleurs par ce qu'elles sont en ce moment, comme le rouge, le vert, le bleu ou autre. Au lieu de cela, donnez-leur un nom de description comme la couleur d'arrière-plan , la couleur d'action, le titre, la couleur primaire, etc. Et c'est parce que si nous l'avons ajouté et transformons en une teinte verte par exemple, le nom lu n'a aucun sens. Encore une fois, renommez-le en quelque chose d'universel, comme le fardeau principal, le bouton secondaire, l' arrière-plan, etc. Mais avant de finir, qu'en est-il si vous ne voulez plus que le calque ait la même couleur ? Eh bien, il n'y a plus d'entrée de remplissage ici car vous avez attribué ce style de couleur. Donc, en gros, ils sont liés, mais vous pouvez toujours les détacher en cliquant ici. Veuillez noter que vous ne verrez pas cette icône de chaîne à moins que vous ne la survoliez. Bon, maintenant, il apparaît. Cliquez dessus, et cela va être que la forme reste de la même couleur, mais vous avez maintenant accès à l' expulsion et vous pouvez la modifier comme bon vous semble. Permettez-moi de sélectionner un autre calque. Vous pouvez également utiliser ce symbole moins, mais cela éliminera le remplissage et vous risquez de perdre votre forme si vous n'êtes pas prudent. Voyez ce que je veux dire. Où est-il ? Nous l'avons toujours ici, mais il est totalement transparent. Maintenant, pour résumer, toutes les entreprises devraient avoir un jeu de couleurs. Si votre client ne le fait pas, vous devrez en trouver un seul. Nous avons une conférence distincte sur la façon dont vous êtes censé travailler avec différents couleurs et les proposer. Mais en supposant que vous ayez quelques couleurs que vous souhaitez utiliser, ajoutez-les à vos styles de couleurs. ce faire, utilisez cette icône à droite du remplissage, cliquez dessus, puis utilisez le symbole plus. N'oubliez pas de le nommer correctement fonction de la façon dont il est utilisé ou où il est utilisé. Ne le nommez pas en fonction de son look actuel. Avant de partir, permettez-moi de revenir à ce cadeau et je supprimerai les deux styles colorés. Nous partons donc de zéro. Imaginons que nous venons de télécharger ce fichier et qu'il n'y a pas de styles, le haut-parleur, n'est-ce pas ? Bon, pas de problème. Voici comment vous devriez travailler. Je vais maintenir la touche Ctrl et je vais passer à l'un de ces boutons. Je vais utiliser Control car cela me permet d'explorer cette couche. Peu importe si c'est à l'intérieur du cadre, un groupe de plusieurs cadres sur plusieurs boucles. C'est pourquoi je maintiens le contrôle enfoncé, Ok, ensuite je vais continuer à maintenir contrôle et ensuite j'ajouterai le décalage. Et cela me permettra de ramasser plusieurs couches. C'est donc Control and Shift. Juste comme ça. Maintenant qu'ils sont tous sélectionnés, nous pouvons maintenant accéder à cette icône, appuyer sur le symbole Plus et créer un nouveau style de couleur. En général, vous allez configurer vos couleurs au début du projet. Mais au cas où vous rencontrerez cette situation, vous savez maintenant comment la gérer. Imaginez juste qu'un collègue vous envoie ce dossier, n'est-ce pas ? Mais peut-être encore une fois, vous l'avez téléchargé depuis le Web. Maintenant, d'accord, essayez-le et voyez comment vous allez. Ça devrait être sympa et amusant. 16. Comment ajouter des images : images ou rectangles: Bienvenue de retour. Dans cette conférence, je veux vous montrer comment ajouter des images à vos projets. Tout d'abord, où peut-on obtenir images de haute qualité totalement gratuites ? Heureusement, nous avons unsplash.com. C'est l'endroit idéal pour de belles images. Utilisez-les comme vous le souhaitez, ils sont totalement gratuits. Ensuite, je veux vous montrer comment vous devriez travailler avec eux dans Figma. Dans la première rangée, nous avons quelques cadres et en dessous, nous avons quelques rectangles. Voici comment je vous recommande de travailler. Maintenant, utilisez le raccourci clavier Maj K, c' est-à-dire la touche Commande Maj sur Mac. Et cela ouvrira une fenêtre de navigateur. Si vous ne vous souvenez pas de Control Shift K, accédez à la barre d'outils et vous trouverez cette option sous les outils de forme. En dessous de l'outil Rectangle en bas, je vais sélectionner les images en maintenant la touche Ctrl enfoncée et en cliquant dessus. Maintenant, Figma va réfléchir une seconde, va hésiter car il s'agit images énormes de plus de 4000 pixels. Il faut donc être un mauvais patient. Vous savez, Figma est prêt lorsque votre curseur va ressembler à ça. Nous pouvons voir que nous avons trois images chargées. Il ne reste plus qu'à cliquer sur les cadres lorsque To Entry. Super. Reprenons maintenant le processus, mais nous allons utiliser les rectangles cette fois-ci. Donc, Control Shift K, identique aux images pour que vous puissiez obtenir une belle comparaison. Et immédiatement, vous pouvez voir que c'est plus facile à utiliser. C'est ce que je recommande. Ces images sont bien meilleures parce qu'elles s'adaptent mieux. C'est le premier point essentiel. placer des images dans des rectangles vous donnera un meilleur ajustement. Si nous vérifions le panneau Calques, remarquez les différences. Les images ont remplacé les rectangles dans un sens. C'est parce qu'ils seront remplis. On a donc trois couches, pas du sexe. En termes de cadres. Nous avons trois images et trois images. Nous avons donc un peu plus de choses et ce n'est pas idéal. Mais pourquoi devriez-vous vous préoccuper des cadres ? Eh bien, si vous contrôlez, cliquez sur l'image comme ça, vous obtiendrez un surlignement de ses bords. Vous pouvez maintenant le redimensionner. d'autres termes, si vous effectuez un zoom arrière et que vous pouvez également utiliser le panneau Calques pour sélectionner les images, puis les redimensionner. Soyez simplement conscient d'une chose que vous devez maintenir la touche Maj pendant que vous redimensionnez afin de ne pas déformer les images. Sinon, vous pourriez vous retrouver avec quelque chose comme ça. Et évidemment, nous ne voulons pas cela. Veuillez donc maintenir la touche Maj enfoncée ou utiliser l'outil de balance. Ok, donc c'est le problème avec les cadres. Les images ne sont pas définies comme Fells. Ils ne conviennent pas aussi bien, mais ils sont plus faciles à redimensionner. Passons à la deuxième ligne, qui est encore une fois l'option préférée ici si vous souhaitez ajuster l'image, mon conseil est de cliquer ici sur Rogner l'image. C'est le moyen le plus simple et c'est ce que je recommande. Vous pouvez maintenant le déplacer vers le haut ou vers le bas, vers gauche et la droite, etc. Et bien sûr, vous pouvez également le redimensionner. Mais voici le botteur. Laissez-moi beaucoup zoomer. Vous pouvez redimensionner le rectangle ou l'image. C'est donc une nette distinction. Le rectangle ou l' image, les symboles bleus des CD. Ils montrent les bords du rectangle. Donc, si je fais glisser vers l'intérieur comme ça, puis je clique sur Escape pour me valider. Eh bien, le rectangle est maintenant conscient. Permettez-moi d'activer la culture une fois de plus. Si je vais au bord de l'image, nous verrons cette flèche sur ce que Dieu, monsieur. Nous pouvons maintenant le redimensionner, mais encore une fois, maintenez la touche Maj enfoncée. Maintenant, le léger problème est que vous pouvez avoir cette situation où ces bords se chevauchent en quelque sorte. Vous ne savez peut-être pas lequel est lequel, n'est-ce pas ? Dans ces cas, mon conseil lorsque vous déplacez l'image jusqu'à ce que vous puissiez clairement voir comme des bords, il est vraiment utile de zoomer beaucoup. Maintenant, pour récapituler quand vous souhaitez placer des images, les rectangles sont un peu meilleurs que les cadres. Utilisez Control Shift K et cliquez dessus, qu' il s'agisse de rectangles, de cercles ou de n'importe quoi d'autre. Lorsque vous souhaitez modifier une image placée à l'intérieur du rectangle, utilisez l'icône de recadrage en haut de l'écran. Si vous souhaitez le redimensionner, assurez-vous de bien comprendre les symboles bleus surlignés par le rectangle. Bon, encore une fois, le bleu pour le rectangle. OK ? Une chose, vous pouvez également double-cliquer sur n'importe quelle image pour l'ajuster en termes de contraste d'exposition, et ainsi de suite, vous obtenez ces curseurs. Mais sachez que si ce panneau est ouvert et que vous souhaitez le fermer, ne cliquez pas sur le Canevas comme cela. Utilisez plutôt la touche Echap. Laissez-moi refaire ça. Ainsi, avec une image à l'intérieur du rectangle, si vous double-cliquez dessus, vous allez ouvrir ce panneau. Pour le fermer, vous pouvez bien sûr utiliser le symbole X ou, mieux encore, utiliser la touche Echap. Grade. Une dernière chose que vous devez savoir, dire que vous n'aimez pas cette image et que vous voulez en ajouter une autre. Bien sûr. La plupart des gens préfèrent faire glisser une nouvelle photo depuis leur bureau au-dessus d'une photo existante. Mais cela ne fonctionne pas dans Figma comme prévu. Comme vous pouvez le constater, l'image ne va pas dans le rectangle. Voici plutôt ce que vous devez faire. Vous devez sélectionner la forme existante et vous remarquerez que le remplissage est défini sur image. Maintenant, accédez à votre bureau ou à n'importe quel dossier que vous voulez. Prenez votre photo, mais cette fois, déposez-la ici. Voyez ce point culminant. Cela signifie qu'il va remplacer celui existant. Juste comme ça. Maintenant, permettez-moi de le refaire sur un nouveau rectangle. Donc, un simple et basique, n'est-ce pas ? Maintenant, faites glisser une image, mais ne la déposez pas sur le Canevas. Au lieu de cela, déposez-le ici dans cette petite zone. Maintenant, il est en effet un peu trop petit. qui peut faire est ce double-clic à l'intérieur d'une image et ce panneau va s'ouvrir. Vous pouvez maintenant déposer la photo ici. Et parce que c'est plus important, cela peut être plus facile pour la plupart des gens. Dans l'ensemble. C'est ainsi que vous ajoutez des images à votre projet. Contrôlez Shift K sur un rectangle, vous pouvez également utiliser un cadre, mais à mon avis, ce n'est pas aussi bon. C'est donc des rectangles. Merci. 17. Créer une galerie de collage dans Figma: Bienvenue de retour. Mettons nos compétences à l'épreuve en créant une jolie galerie ou un collage dans Figma. Voici ce que je veux que vous fassiez. Je veux que vous vous chronomissiez la première fois et la deuxième fois que vous allez le faire. S'il vous plaît, à la fois le temps dans les commentaires et votre conception. Commencez par n'importe quel cadre, n'importe quelle taille, car je veux que vous modifiiez sa largeur et hauteur à partir du panneau des propriétés. Nous recherchons 1920 d'ici 1080. Ensuite, ajoutez n'importe quel rectangle aléatoire. Maintenant, c'est le point intéressant. Disons que nous voulons trois colonnes, n'est-ce pas ? Vous pouvez utiliser ce que vous voulez, mais je vais en utiliser trois. Comment s'assurer que le rectangle est suffisamment large pour un bon ajustement ? Eh bien, voici le truc dans le champ de largeur, vous pouvez faire des calculs. Tapez donc dans 1920 slash 3, c'est 1920 divisé par trois. Et ça va nous donner 640. Et maintenant, nous pouvons créer des copies de cette forme et nous savons qu'elle va bien s'adapter ? Vous pouvez utiliser le contrôle D pour effectuer des copies, D comme en double, mais cela placera la copie juste au-dessus de la copie initiale. Voici donc un meilleur moyen. Ce que je suggère, c'est de maintenir la touche Alt ou Option enfoncée sur un Mac, cliquer et de faire glisser une copie. Maintenant, cela fonctionne dans la plupart des programmes de design, et je suis très content des mots dans Figma 21 de plus de temps. Mais cette fois, je veux que vous mainteniez Alt et Shift aussi. Maj permet à la copie de se déplacer en ligne parfaitement droite. C'est donc génial. Le problème est que nous ne pouvons pas voir les bords de nos formes. Veuillez sélectionner Alt V et ajouter un trait. Ceci est disponible juste ici sous le remplissage. Le coup est très facile à utiliser. Vous pouvez régler la couleur de la même manière que le sélecteur de couleurs soit exactement le même. Cela signifie que nous pouvons avoir une couleur unie, un dégradé ou même une image sous forme de trait. Nous voulions du blanc pur, mais mon conseil est que vous le rendiez un peu plus épais. Mais veuillez noter que vous devez utiliser les touches fléchées de votre clavier pour modifier cette valeur. défilement de votre souris ne fonctionne pas ici. D'accord ? Vous pouvez maintenant changer de positionnement. En ce moment, il est placé à l'intérieur. Je suis très content de cela, mais vous pouvez choisir un autre cadre. Si vous choisissez le centre et que vous avez une valeur de six pixels, trois d'entre eux seront placés à l' intérieur et trois d' entre eux à l'extérieur. C'est donc ce que signifie centre. Ensuite, nous devons ajouter d'autres lignes. Nous allons donc utiliser exactement la même technique. Donc, tout pour faire une copie et se déplacer afin de le faire passer en ligne droite. Donc, tous les glisser-déplacer. Dans ce cas, je n'ai pas fait de maths parce que je veux vous montrer une alternative. Maintenant que nous avons neuf formes, veuillez les sélectionner toutes. Au cas où vous sélectionnez le cadre, appuyez sur Entrée. Notez cette différence au fait. instant, j'ai sélectionné les formes. Mais si je dessine une grosse boîte, comme ça, d'accord, maintenant ce cadre qui s'appelle le top qui est sélectionné et qui n'est pas bon, ce n'est pas ce que nous voulons. Donc, si le cadre est sélectionné, appuyez simplement sur Entrée et tous les calques à l'intérieur desquels ils seront sélectionnés. OK, nous allons maintenant aller ici et traîner vers le bas. Vous vous sentirez figma. Nous allons essayer de vous aider à trouver le bord du cadre. Très beau. Maintenant, ça va. Bon, il est temps d' ajouter quelques photos, aller sur unsplash.com et d'en télécharger un tas. Je l'ai déjà fait, alors permettez-moi d'utiliser Control Shift a pour les ajouter. Encore une fois, attendez une seconde jusqu'à ce que Figma les traite. C'est généralement passé. Maintenant, cliquez sur chaque rectangle. Il s'agit d'un exercice de vitesse. Les techniques sont assez simples. Alt Shift, faites glisser, contrôlez Maj K, et c'est à peu près que rien d'aussi spécial. Ou bien sûr, vous pouvez faire des calculs. Mais je veux que tu bouges le plus vite possible et que tu crées un beau collage. Maintenant, j'aimerais voir quelques images de votre pays. Voyez si vous pouvez trouver quelqu'un qui devrait être amusant. Et si le trait blanc ne fonctionne pas, veuillez sélectionner tous les calques comme ça. Jetez un coup d'œil. Le cadre n'est pas sélectionné. Les formes sont. D'accord. Changez maintenant la couleur du trait par tout ce que vous voulez. Vous pouvez également ajuster l'épaisseur, peut-être la position. Maintenant, il est préférable de le faire maintenant parce que vous voyez comment l'ensemble de la galerie est affectée. Essayez-le et publiez votre propre collage. Encore une fois, j'aimerais voir photos de votre autre pays. Ayez un et n'oubliez pas de publier votre travail et votre temps. Merci. 18. Comment masquer Figma: Bienvenue de retour. Nous savons comment ajouter des images dans Figma Control Shift K ou faire glisser et déposer des photos dans la région remplie, soit dans le panneau de droite, soit dans cette zone de révision. Ce sont donc les principales options. Mais laissez-moi vous montrer quelque chose d'autre que vous devez savoir et qui masquera. Supposons que vous vouliez créer un avatar. Un thème très courant dans les projets de conception Web. Commencez par une ellipse, un cercle. Vous pouvez le trouver sous l'outil Rectangle. Glissez-en un et pendant que vous obtenez un bail, maintenez la touche Maj. Et cela vous donnera un cercle parfait. Ensuite, faites glisser n'importe quelle image au-dessus. J'en ai déjà préparé un. Maintenant, au départ, va être énorme, surtout depuis unsplash.com. Ce film n'est pas ajouté comme un film intentionnel. Ok, maintenant, c'est une bonne occasion de vous apprendre à redimensionner rapidement une image géante en plus du point, mais c'est une bonne opportunité. Nous savons donc que nous devons maintenir le décalage ne pas déformer l'image correctement, écraser ou quoi que ce soit de ce genre. Ok, maintenant, Shift nous aide avec ça. Mais si vous maintenez la touche Alt ou Option enfoncée sur un Mac, cela vous permettra de redimensionner l'image des deux extrémités. Donc, si vous travaillez sur ce point de coordonnées, l'autre va emboîter le pas. C'est donc Alt et Shift pour le réduire, c' est une façon de travailler plus rapidement. Bon, revenons à nouveau au sujet principal masques, assurez-vous que le cercle se trouve sous la photo. C'est très important, va maintenant fonctionner autrement. Maintenant, sélectionnez-les tous les deux et avez cette icône dans cette zone supérieure. Dans ce cas, vous avez plus que Mask. Si vous cochez le panneau Calques, vous verrez que vous disposez désormais d'un groupe de masques. Et il contient deux choses, bien sûr, la photo et le cercle. Si vous cliquez sur la photo, vous pouvez redimensionner l'image, déplacer, etc., une liberté totale. La même chose s'applique si vous passez à l'ellipse. Bien qu'un contrôle total. Est-ce mieux que d' utiliser Control Shift K ? Eh bien, c'est vraiment à vous et à vos préférences, mais notez leur avantage, disons que vous avez un grand calque de texte. Ceci est illustré dans l'Airbus 300. Donc, une taille massive et massive, 300 est absolument énorme. Maintenant, je vais faire glisser une autre image au-dessus ce calque de texte et je vais répéter l'action. Je vais créer un masque en cliquant ici. Et comme je l'ai déjà dit, nous avons le contrôle total de déplacer l'image pour mieux l'effet peut être pivoté, etc. Et le calque de texte est toujours vivant, il est toujours modifiable. La seule chose que vous devez faire est de saisir l'outil de texte. Il n'est pas nécessaire de sélectionner un calque particulier. Vous pouvez réellement sélectionner quelque chose de complètement différent, comme cet avatar. Maintenant, je vais activer l'outil de texte et passer ici. Ok, maintenant je vais modifier le texte sur n'importe quoi d'autre, peut-être quelque chose comme ça, et c'est tout. Pour résumer, vous pouvez utiliser n'importe quel type de calque, que ce soit la forme d' un calque de texte ou une autre image, et l' utiliser comme masque. Ce qui est important, c'est que vous placiez calque spécifique sous l'image et que vous y arriviez. Voici un autre avantage à utiliser des masques par rapport à la technique de contrôle Shift K. Vous pouvez ajouter plusieurs calques à ce masque et ils seront masqués, par exemple, tous comme certains cercles ici. Remarquez comment cela fonctionne. Dans le panneau Calques. Nous pouvons voir que cela s'étend. Cela nous indique que toutes ces ellipses font également partie du masque. En gros, tout ce que vous ajoutez à ce groupe va agir de cette façon. Par exemple, si vous voulez un nouveau cercle non caché, vous devez le placer en dehors de ce groupe. Maintenant, pour être honnête dans d'autres travaux de conception Web, nous ne rencontrerons pas trop de cas comme celui-ci. Mais connaître les principes du masquage est important. Si vous recevez un test de compétences lors d'un entretien, vous saurez maintenant comment cela fonctionne. Et avec cela, continuons, mais assurez-vous pratiquer ce que je viens de vous montrer. 19. Voici les 3 types de texte de Figma: Bienvenue, bienvenue. Voyons comment nous pouvons travailler avec du texte. Nous aborderons les bases et, comme auparavant dans la prochaine vidéo, nous ferons plus de progrès. Il existe deux façons d'ajouter du texte dans Figma lorsque vous pouvez cliquer et commencer à taper comme ça. Et la seconde sur laquelle vous pouvez cliquer, faites glisser une boîte, puis commencez à taper. Je vais coller du texte avec Control V, alors il suffit de le coller. Il s'agit maintenant de deux façons différentes d'ajouter du texte. Maintenant, laissez-moi cliquer à nouveau. Lorsque vous démarrez n'importe quel calque de texte et que vous souhaitez terminer de l'éditer, vous pouvez cliquer n'importe où ailleurs. Et comme vous pouvez le constater, le texte a été enregistré. Ou laissez-moi refaire ça. Vous pouvez également appuyer sur la touche Echap et le texte reste tel quel. Maintenant, je sais que dans d'autres programmes, la touche Echap peut supprimer le texte, mais ce n'est pas le cas ici. C'est donc votre premier point essentiel. Escape est votre ami, que ce soit dans le sélecteur de couleurs lorsque vous ajoutez du texte ou lorsque vous travaillez avec n'importe quel autre panneau. Revenons maintenant au texte du paragraphe, c' est-à-dire celui avec la boîte que nous avons dessinée, nous pouvons saisir une poignée et la déplacer. Cela vous permet de le rendre aussi large ou étroit que vous le souhaitez. Nous avons maintenant quelques options ici. Si nous cliquons sur celui-ci appelé Auto, où le texte sera aussi large qu'il doit être pour tenir sur une seule ligne. Nous ne voulons pas que ce cran ici, ni en général, soit honnête. Bon, permettez-moi d'ajouter le nouveau calque de texte via une boîte. Notez quelle icône est pressée par défaut, c'est celle-ci, taille fixe. Si vous y réfléchissez, c' est logique. Nous avons dessiné cette boîte, n'est-ce pas ? Nous, l'utilisateur, le concepteur, nous avons probablement fait cela, si gros parce que c'est ce dont nous avons besoin. Il en va de même pour la troisième option, ils sont de taille fixe. En gros, c'est dire à Figma c'est la taille que je veux. Ok, il y a une autre option ici appelée « cache automatique ». C'est très utile car lorsque nous dessinons des boîtes, nous sommes assez négligés pour être honnête. Comme vous pouvez le constater, il y a beaucoup d' espace vide ici en bas. Et ce n'est pas cool. Laissez-moi vous montrer pourquoi. Supposons que j'ajoute une autre forme à la toile. Ok, maintenant avec ces deux côte à côte, disons que je veux un fond les aligner correctement. Maintenant, regardez ce qui se passe. Figma considère que ce calque de texte est aussi grand. Maintenant pour nous, surtout lorsque nous désélectionnons, nous supposons que cela, tout ce qui est. Comme vous pouvez le constater, c'est tout un problème. Voici un autre exemple rapide. Dans Figma, vous pouvez mesurer les distances en maintenant la touche Alt enfoncée et en déplaçant votre curseur. Il y a donc la touche ALT , puis le curseur est déplacé. Donc, si le calque de texte sélectionné et que nous maintenons la touche Alt enfoncée, et que nous déplaçons notre souris sur le rectangle. Eh bien, Figma va nous montrer la distance. Cool comme prévu. C'est prévisible. C'est le mot clé ici. Prévisible. Mais regardez ce qui se passe si nous plaçons le rectangle en dessous. Si nous vérifions la mesure. Ce n'est évidemment pas exact. C'est une surprise et ce n'est pas bon. Techniquement, c'est exact, mais ce n'est pas ce à quoi nous nous attendions. La solution consiste donc à choisir hauteur automatique, la hauteur automatique. D'accord ? Maintenant, je sais que je passe cinq minutes là-dessus, mais c'est important au cas où vous auriez à expliquer ce qu'ils doivent résumer. La première est idéale pour les lignes de texte simples généralement courtes. Le second est généralement le plus utile en tant que boîte ou simplement basé sur le texte. Et le troisième est ce que ces cas où vous savez exactement quelle taille vous voulez. Dans mes projets réels, je commence par une boîte aléatoire. Donc, la troisième option, après avoir basé mes textes, je passe ensuite à la masquage automatique, et c'est ce que je recommanderais. Encore une fois, dessinez une boîte aléatoire, puis passez à masquer automatiquement. Avant de partir, parlons de la famille de polices, des polices et des polices de caractères, des mots tout ça. Eh bien. Le premier ici est la famille de police. Roboto est une police de caractères ou une famille de polices qui contient plusieurs polices de caractères ou famille de polices. Ils veulent juste dire la même chose. Je vais répéter que, encore une fois, police de caractères et la famille de polices, c'est la même chose. Maintenant, pour comprendre les différences entre une police et la famille de polices, pensez à ce qui suit. Vous faites partie d'une famille, n'est-ce pas ? Maintenant, il peut y avoir plusieurs personnes dans votre famille, peut-être une seule personne, c'est très bien aussi. Néanmoins, vous avez une famille. Maintenant, utilisez spécifiquement une police. Vous êtes toute la famille est une police de caractères ou une famille de polices. Mais les individus, par exemple, votre mère, vos frères ou vos systèmes, ce sont des polices de caractères. Encore une fois, cela signifie que l'albédo est une police de caractères ou une famille de polices. Et Roboto bold est une police qui fait partie de cette famille de polices. La plupart des gens échangent souvent ces mots comme s'ils signifient la même chose. Police et police de caractères. Ce n'est pas exact à cause de ce que je viens de décrire. Si vous les mélangez, ce n'est pas la fin du monde pour être honnête. Vous ne serez pas mis en prison à cause de ça. Mais encore une fois, pour résumer, plusieurs polices, maquillage de la famille de polices bien que Bordeaux italique, Roboto, Light, Roboto, gras. Ce sont toutes des polices. Ils font partie de la famille de police Roboto. Ok, maintenant vous connaissez les différences et nous pouvons continuer. Merci. 20. Découvrez les propriétés de calques de texte: Bienvenue de retour. Jetons un coup d' œil à cette partie du panneau Propriétés et voyons ce que fait le lit. Plus que cela, je vais vous raconter mes meilleures pratiques. Ce ne sera donc pas seulement une visite de base. OK ? Nous savons maintenant que c'est le champ de la police de caractères. Nous avons Roboto ici pour le changer, il suffit de taper autre chose. C'est ainsi que fonctionnent la plupart des Bros. Vous n'ouvrez pas cette liste, puis faites défiler, mais vous tapez simplement quelque chose comme MOSFET et leur ego, Montserrat. Maintenant, faisons un détour rapide et rapide. Comment obtenir ces polices ? Maintenant, la plupart des gens utilisent Google Fonts, mais voici un conseil. Il est important que vous choisissiez vos polices en fonction de l'humeur du projet. À titre d'exemple, imaginez que vous allez à la plage, n'est-ce pas ? Porteriez-vous un costume formel ? Bien sûr que non. Qu'en est-il du mariage ? Porteriez-vous le short et les tongs ? Encore une fois, bien sûr que non. Chaque situation est différente et nécessite un aspect différent. Il en va de même pour vos projets de conception Web. C'est pourquoi il faut prendre temps et réfléchir à ce qui fonctionne le mieux. Certaines polices sont élégantes, d'autres ludiques, certaines sont sérieuses, sévères. Cela signifie donc que cette décision ne devrait pas être rapide. Une fois que vous avez pris votre décision, vous devez télécharger la police en cliquant ici. Le processus est assez simple. Vous allez obtenir l'archive zip qui doit être extraite. Dans ce dossier. Vous trouverez certains fichiers qui doivent être copiés dans des polices C Windows. Et c'est ça. Dans certains cas, vous pouvez maintenant redémarrer Big Map pour vous assurer que ces liaisons seront disponibles. Je vous conseille de télécharger cette archive qui contient la majeure partie de la responsabilité de Google Pons. C'est absolument énorme, alors n'oubliez pas cela. Bon, maintenant, c'est ce que vous devez rechercher. C'est un site très populaire et vous pouvez lui faire confiance à 100%. Ok, la partie suivante de Figma et de ce panneau de propriétés, c'est ce qu'on appelle le poids ou le style. Certaines polices de caractères ont un style unique. Si vous revenez aux polices Google, vous verrez le nombre de styles affichés ici. Mon conseil, utilisez toujours des liens qui ont au moins trois styles. C'est donc léger, régulier et audacieux, par exemple, au moins trois d'entre eux, n'est-ce pas ? En continuant, c'est ici que vous définissez votre taille. C'est en pixels, même s'il ne le mentionne pas. Vous ne pouvez pas utiliser le défilement de votre souris pour le modifier vers le haut, mais vous pouvez saisir vos valeurs manuellement ou, comme la plupart des gens le font, ils utilisent les touches fléchées haut ou bas. Plus le quart de travail. Shift modifie cette valeur par incréments de 10 pixels. C'est plutôt sympa. Bon, voici les trucs amusants. La hauteur de la ligne. C'est crucial pour mes projets de conception Web. Cela contrôle la quantité d' espace vertical entre chaque ligne. Permettez-moi de vous montrer qu'une valeur très faible rendra le texte en question. C'est comme si quelqu'un avait marché dessus. Écrivez, une valeur généreuse va le rendre libre. Ces deux extrêmes doivent maintenant être évités. Vous devez plutôt utiliser cette formule spécifique, la taille de police multipliée par 1,5. Donc, s'il s'agit de 12 pixels, cela signifie que la hauteur de la ligne doit être de 18. Si vous ne souhaitez pas effectuer de mathématiques, vous pouvez également saisir un pourcentage tel que 150 %. Je préfère les valeurs de pixels. Encore une fois, c'est 1,5 fois la taille de police. Vous pouvez toujours utiliser le multiplicateur le plus petit, comme 1,4 ou 1,3. Mais j'adore Pi à un point. C'est l'endroit idéal que j'utilise le plus pour x, mais c'est dans des situations très spécifiques qui couvriront ensemble. Mon conseil reste avec 1,5 et vous serez prêt à partir. La prochaine étape est l'espacement des lettres. Vous ne devriez pas jouer avec ça , sauf pour les titres assez courts. Quelques mots et c'est tout. Mais n'avez jamais modifié ce champ pour les paragraphes. C'est une énorme erreur. Maintenant, l'espacement des paragraphes suivants, c'est beau et soigné, mais je ne peux pas dire que je l'utilise souvent. Ça tue l'idée. Dites que nous avons un bloc de paquets, n'est-ce pas ? Je vais appuyer sur Entrée et ça va le briser. Mais si vous souhaitez contrôler la quantité d'espace vide ici, vous pouvez utiliser ce champ. Remarquez comment cela fonctionne, même si nous n'avions pas d'espace vide visible ici, ce champ l'a inséré. Ici. Je vais le taper deux fois. Et évidemment, nous allons combler cet écart ici. Je vais appuyer sur Entrée, mais seulement sur un. Pour effectuer cette option appelée espacement des paragraphes. Nous pouvons ajuster nos écarts. Encore une fois, c'est cool pour des gens comme moi, mais allez-vous l'utiliser ? Je débiterai assez. Donc, ne vous inquiétez pas, c' est juste quelque chose dont vous devriez être conscient. Les dernières options ici sont assez simples. Il s'agit de l'orientation du texte, aligné à gauche ou à droite, ou, dans ces rares cas, centré. C'est assez facile à comprendre. Vous allez l'utiliser beaucoup. Mais voici quelque chose que vous n'utiliserez pas. Cette partie modifie ici l'alignement du texte dans la zone de position. Donc, si la boîte est assez grande, vous pourriez potentiellement l' aligner en bas ou la centrer. Mais, et c'est énorme, mais je ne vous recommande pas de jouer avec. Ce n'est pas nécessaire. Vous comprendrez pourquoi c'est le cas plus tard devant les tribunaux, nous avons de bien meilleures options. Maintenant, vous pensez peut-être que nous en avons fini avec cette partie, mais il y a encore beaucoup de choses à faire. Cliquez sur ces points et voyez combien de fonctionnalités Pigma nous offre réellement. De plus, il s'agit d'une fenêtre défilante pour qu'il y ait beaucoup de choses que nous explorons. Maintenant, ce que j'aime, c'est le fait que vous obtenez cette fenêtre d'aperçu ici, à gauche, au centre, à droite. Vous le savez probablement. Mais si vous n'êtes pas familier avec la tarte, par exemple, entendra ce mot qu'il est, la deuxième ligne de texte comporte des espaces plus grands, ce qui fait qu'elle forme un beau bloc de texte. Qu'en est-il de sous-jacent à tous les barrés ? Il suffit de les survoler et de voir ce qu'il y a. Mais encore une fois, la vérité est que je n'utilise pas vraiment ces discours, sauf pour celui en particulier, tous les plafonds. Ceci est disponible ici, sous majuscule. Cliquez sur le premier et remarquez la modification. Vous pouvez voir que cette option est activée par cet arrière-plan gris. Le mouvement clique sur le moins. C'est un choix un peu bizarre car dans la plupart des programmes de conception, si vous cliquez à nouveau dessus, vous le désactivez pas ici. Encore une fois, si vous souhaitez le désactiver, utilisez le symbole moins. Pour le reste, je vais vous laisser explorer ces parties si cela vous intéresse. Mais mon conseil, installez beaucoup de Google Fonts. N'oubliez pas d'utiliser 1,5 pour la hauteur de votre ligne et ne gâchez pas avec ces autres éléments, sauf tous les capuchons. Nous avons des choses bien plus importantes à couvrir. Merci, et je vous verrai lors de la prochaine conférence. 21. Comment travailler avec un texte comme un pro: Bienvenue de retour. Permettez-moi de vous montrer comment les professionnels travaillent avec les couches de texte dans Figma. Une fois que vous avez configuré un texte, regardez d'une certaine façon, nous devons utiliser cette icône ici. Ce panneau s'appelle Styles de texte. Et si vous avez suivi, cela ressemble beaucoup aux styles de couleurs. Cliquez sur le symbole plus et vous pouvez maintenant le nommer. L'étape suivante, vous pouvez sélectionner n'importe quel autre calque de texte ou en créer un tout nouveau. Et au lieu de jouer avec tous ces paramètres, vous pouvez le faire. Cliquez ici et choisissez le style basque que nous venons de créer. De plus, vous pouvez organiser ces styles comme vous le souhaitez. Mais la plupart des gens utilisent la structure suivante. H1, H2, H3, parfois H4, corps de textes, guillemets, liens et peut-être quelques autres éléments. Mais prenons le meilleur en bas. Pourquoi, pourquoi avons-nous besoin de tout ce travail de préparation ? Eh bien, voici le truc. Permettez-moi d'ouvrir ce billet gratuit à partir de l'onglet Communauté. Nous avons trois titres ici, non ? Si nous cliquons sur le premier, nous pouvons voir que cela est affiché dans un chemin de fer extra gras de 25 pixels. Mais que se passe-t-il si la suivante était 23 pixels et que la dernière était de 27 pixels ? Est-ce que ça ira bien ? Non, bien sûr que non. C'est parce que nous avons besoin de cohérence, mais nous avons également besoin de vitesse. Donc, pour nous assurer que nous avons ces deux choses, nous avons mis en place un style. Nous appellerons ce h3 ou le sous-titre, ou ce que vous voulez. Et maintenant, nous pouvons appliquer ce style partout. Il s'agit d'une seule page, mais encore une fois, cette conférence porte sur le fonctionnement des designers professionnels. Les projets sérieux peuvent avoir 2050 même lorsque 100 pages ou écrans. Lorsque c'est le cas, vous ne vous souvenez peut-être pas, si cette valeur était de 22 ou 24, 26, les gens oublient que c'est normal. C'est pourquoi nous avons les textiles américains. Cela nous aide à travailler plus rapidement , mais aussi à rester cohérents. Maintenant, à propos de cette structure de nommage, vous ne savez peut-être pas ce que signifient H1, H2, H3. D'accord. Permettez-moi de l'expliquer rapidement. H représente le titre ou le titre. Il s'agit d'un terme qui vient du HTML et il s'agit d'une convention de dénomination standard. H1 doit être utilisé pour le titre le plus important de la page. C'est également le plus gros, et il n'y en a généralement qu' une seule sur la page. H2 est un autre titre et on voit souvent plusieurs fois sur la page, mais il est moins important de s'assurer qu'il s'agit de choses très différentes. Vous devez vous assurer qu'il y a une grande différence entre eux. Donc, si H1 est de 60 pixels, H2 ne doit pas être de 56 pixels, n'est-ce pas ? Par sexe. Non, parce que ce serait trop similaire. Les gens ne voient peut-être pas la différence. Au lieu de cela, vous devriez utiliser quelque chose comme 48 pixels. Maintenant, permettez-moi d'être clair. n'existe pas de directives strictes. Il n'y a pas de règles particulières que vous devez suivre si vous souhaitez obtenir votre titre le plus important. Donc, H1 doit être de 48 pixels, c'est tout à fait très bien. Si vous voulez qu'il soit plus grand ou plus petit. Encore une fois, c'est très bien. C'est à vous de décider. La seule règle est cela garantit qu'ils sont suffisamment différents, surtout avec les trois premiers titres, H1, H2, H3. Encore une fois, ces éléments devraient signifier un niveau d'importance différent. Maintenant, dans ce projet particulier, si nous désélectionnons, nous constatons que nous avons sept rubriques. C'est assez inhabituel, mais comme je viens de le dire, nommez-les comme vous le souhaitez. Par exemple, ce concepteur a choisi ce texte de la section Témoignage pour être coiffé en H6. J'aurais préféré que cela soit appelé corps de texte. Et j' utiliserais probablement le même pour cette brève description ici dans ces cartes. Mais encore une fois, au bout du compte, n'exercez pas beaucoup de pression sur vous-même. Si vous ne savez pas comment les appeler. Utilisez le nom que vous voulez. Textes de témoignage pour réviser du texte, citer, tout ce qui fonctionne pour vous, tant que vous vous souvenez de ce que vous avez fait est tout à fait correct. Revenons maintenant à la vitesse, modifions le titre pour dire la version extra audacieuse, n'est-ce pas ? Je vais augmenter cette valeur jusqu'à une valeur élevée, disons 60 pixels. Notez comment de nombreuses couches de texte ont été mises à jour dans une page. C'est agréable à avoir, mais il n'y a rien d'aussi fou, non ? Ce n'est pas si impressionnant que ça. Mais dans un design de 50 pages, c'est absolument monumental. C'est ainsi que les professionnels travaillent avec les calques de texte. Ils ont sauvé leur style dans ce panneau et ils l' utilisent pour être plus rapides mais aussi pour rester cohérents en faisant cela, ils font le travail, mais ils ont aussi beaucoup de flexibilité. Donc, si le client déteste cette police, vous pouvez rapidement changer les choses. Rapidité, cohérence, flexibilité, ce sont des textiles pour vous. 22. Effets de Figma : flou de la flou et plus encore: Bienvenue de retour. Qui n'aime pas les effets ? J'ai raison ? Job, les ombres dans les ombres brouillent les mots, non ? Eh bien, Figma a découvert, Commençons par ce design que vous avez attaché au cours. Explorons les différents exemples à partir de ce menu principal. Ça a l'air plutôt bien, non ? Mais le contraste n'est tout simplement pas là. C'est un peu difficile à lire. Nous pourrions le sélectionner. Cette valeur contrôle l'opacité de cette couche, mais voici une meilleure façon de s'y prendre. Accédez à Effets et cliquez sur ce symbole plus. N'oubliez pas que vous pouvez faire défiler ce panneau. Donc, si vous ne voyez pas d'effets ou d'exportation, faites simplement défiler vers le bas. Maintenant, par défaut, vous obtiendrez une ombre portée. Cliquez ici et modifiez-le. Et comme ça, ce rectangle est devenu gelé. Mais disons que vous ne pouvez vraiment pas sonner à cause de l'enregistrement. Eh bien, pas de problème. Cliquez ici sur cette icône pour personnaliser leur effet. Il n'y a qu'un seul champ qui contrôle l'intensité du flou d'arrière-plan. Changez-le à huit. Laissez-moi zoomer et vous devriez voir l'effet. C'est très populaire, surtout sur les applications iOS. Ce look gelé pour voir l'avant et l'après, vous pouvez cliquer sur cette icône juste ici pour penser que c'est un bon pas en avant. Mais mon conseil est que vous vous en tenez au blanc ou au noir. Bon, essayons encore une fois. Sur ce bouton secondaire, vous pouvez voir que l' image d'arrière-plan est un peu désordonnée. Encore une fois, il est difficile de lire le flou d'arrière-plan et ça va être plus beau. Mon conseil est que vous ne vous laissez pas emporter par cela. Je n'ajouterais pas cela ici sur ces mélanges simplement parce que nous l'avons déjà utilisé dans l'en-tête, et c'est suffisant. Bon, passons maintenant au titre principal. Même problème de visibilité. Cette fois-ci, une ombre portée peut nous aider à l'activer et oui, je pense que c'est plus facile à lire. Maintenant, mon conseil est que vous désélectionnez toujours pour voir le texte sans aucune distraction. Ouvrons les paramètres et voyons ce qui se passe. X signifie horizontal. Mon conseil est que vous le laissez toujours à 0. Laissez-moi aller jusqu'à quelque chose de 30. Voyez ce qui se passe. L'ombre se déplace vers la droite. Et si vous utilisez une valeur négative allez vers la gauche. Dans le design Web moderne, ombres errantes sont la façon dont elles évoluent. C'est mieux de cette façon. Encore une fois, 0 et si x représente l'horizontale, y représente l'axe vertical. Et cela contrôle à quelle distance l'ombre est placée par rapport au texte. Les faibles valeurs fonctionnent mieux. En fait, la plupart des ombres tombées devraient être vraiment, vraiment, vraiment subtiles, à peine perceptibles. Mais si vous voulez vous démarquer davantage, vous pourriez augmenter l'opacité. En ce moment, il est à 25 %. Maintenez la touche Maj enfoncée et appuyez sur la flèche haut, nous l'augmentons. Mais c'est un danger que, déjà, je n'utilise jamais une valeur aussi élevée. Reprenons-le donc. Bon, passons maintenant au bouton principal. Ici, je vais vous montrer un autre type d'ombre portée, cette fois une ombre colorée. Utilisez le même violet que le bouton. Vous devriez l'avoir ici. Mais si vous ne faites pas simplement échantillonner le bouton, l' outil pipette est fantastique. Maintenant, augmentez le flou à quelque chose comme Ben et pour la valeur y, disons six. Enfin, prenez l'opacité jusqu'à 50 pour cent, juste au cas où vous n'auriez pas vu se déroulait le décodage. Permettez-moi de déplacer cette image d'arrière-plan. Remarquez comment le bouton rayonne l'habitude a un globe. C'est une autre façon d'utiliser une ombre portée, des trucs cool. Passons maintenant à calquer le flou. Sélectionnez l' image principale et appliquez-la, et vous verrez immédiatement ce que cela aide à la lisibilité du texte. Et bien sûr, vous pouvez ajuster son intensité à partir de cette partie ici. Maintenant, laissez-moi éclaircir quelque chose. s'agit du flou du calque Il s'agit du flou du calque qui affecte le calque sur lequel il est appliqué. Ce bouton présente un flou d'arrière-plan. Ainsi, l'effet gelé n' apparaît que sur son arrière-plan. C'est donc la différence. Je vais le dire encore une fois. Le flou du calque fonctionne sur le calque que vous avez appliqué sur le calque d'arrière-plan ne floue que le calque situé derrière le rectangle ou ce cadre spécifique. Ok, lors de cette conférence, laissez-moi dire deux choses. abord, essayez ces effets pour les voir par vous-même et voir comment vous les aimez. Je vous recommande également d'essayer de remplacer l'image d'arrière-plan par une autre de unsplash.com. Maintenant, la deuxième chose, et c'est en fait l'important. Veuillez utiliser les effets avec parcimonie. Ne les ajoutez pas partout. Et quand vous le faites, soyez subtil à ce sujet. Tous ces effets ne sont pas la béquille. Si vous ne parvenez pas à lire le texte en premier, essayez de flouter l'arrière-plan. Si cela ne fonctionne pas, cliquez ici et ajoutez la superposition noire. Mais si cela ne vous donne pas de très bons résultats, veuillez simplement changer l'image. Une fois encore. Les effets ne sont pas votre grâce salvatrice. Ce n'est pas une béquille sur laquelle vous pouvez vous appuyer. Bien sûr, vous pouvez ajouter une ombre portée et des traits massifs et n'importe quoi d'autre. Mais ça va paraître horrible. Encore une fois, veuillez utiliser une très faible dose d'impacts. C'est pourquoi je ne vous montrerai pas assez d'ombre, par exemple. Ce n'est pas une option ici, mais la plupart des débutants l'utilisent trop et ils donnent à leurs créations l' impression qu'on est à nouveau en 2005. Encore une fois, je vais juste sauter ça. OK. Dans l'ensemble, s'il vous plaît, amusez-vous et rappelez-vous que les doses sont faibles. 23. Tout dont vous devez connaître les grilles: Bienvenue de retour. Parlons de grilles. Commencez un tout nouveau projet et ajoutez-y ce cadre supérieur. Veuillez modifier la largeur sur 1920, car c'est ce que je recommande toujours. un zoom arrière et parlons de l' ajout et de l'utilisation d'un système de grille. Tout d'abord, est-ce que tu l'ajouteras. Cela se fait en sélectionnant le cadre comme cela. Maintenant, dans ce panneau juste en dessous de la mise en page automatique, vous trouverez la grille de disposition. Cliquez dessus et une grille mobile sera appliquée par défaut. Évidemment, cela est utile pour les applications mobiles, iOS et Android, mais pour la conception Web, cliquez ici et à partir de la grille, basculez deux colonnes. Voici les meilleurs paramètres pour la grille d'un projet de conception Web. 12 colonnes et la marge de 360. C'est ce que je vous recommande vivement d'utiliser. Pourquoi avons-nous besoin d'une grille ? Eh bien, cela nous aide à aligner correctement les choses. Fermez cela et saisissez l'outil Rectangle. Imaginez que nous allons concevoir des cartes pour une boutique en ligne, n'est-ce pas ? 12 colonnes est la norme car nous pouvons diviser ce nombre par 234, voire six. J'ajouterai ici un rectangle qui s'étend sur quatre colonnes. Je vais rapidement le dupliquer, puis vous verrez qu'il ira bien. Cette grille vous montrera toutes les imperfections. Par exemple, permettez-moi de déplacer celui-ci un peu sur le côté. Voyez comment cela se démarque. Les grilles vous permettent de rester en ligne, mais elles vous aident également dans Figma lorsque vous souhaitez redimensionner quelque chose, par exemple pour la version de bureau, le redimensionner pour la version tablette. Donc 12 colonnes avec pourquoi 360 de chaque côté. Eh bien, c'est ma préférence personnelle. Et voici pourquoi. 360 fois 20, c'est 720. 1920 moins 720 est de 1200 pixels. Cette partie de la conception est appelée zone active, et c'est là tous vos éléments importants doivent être placés. Permettez-moi de vous montrer un exemple rapide. Dites le New York Times, n'est-ce pas ? Découvrez comment beaucoup d'espace vide de chaque côté du contenu. Ainsi, la marge 360 que nous avons mise en place. Mais voici le truc. Passons à Stripe.com. Vous pouvez clairement voir qu' une ligne verticale traverse le côté gauche. Les choses sont parfaitement alignées. Ok, rien d'autre ne va en dehors de ça. Mais du côté droit, regardez ce qui se passe, ce qui se passe ici. Pourquoi cette conception de tableau de bord est-elle autorisée à sortir de la zone active ? Même chose si on fait défiler un peu vers le bas. En fait, ce n'est pas une erreur. Cette partie au milieu, c'est un contenu essentiel. Vous devez le lire, vous devez le voir. Mais cette partie qui est à l'extérieur, c'est juste décoratif. Ça a l'air beau, mais c'est à peu près ce n'est pas essentiel, ce n' est pas important. Ainsi, pour résumer, la grille pour les projets de conception Web doit être de 12 colonnes, 360 marges, largeur 1920, avec une zone active de 1200 pixels. Vous pouvez placer des éléments de conception à l'extérieur de ces 100 pixels construits, mais uniquement s'ils sont décoratifs. Cela signifie que s' ils ne sont pas vus, ce n'est pas grave. Permettez-moi d'expliquer un peu plus les choses. La résolution d'écran la plus utilisée au monde est actuellement 1920 x 1080. C'est pourquoi mon cadre est en 1920 et non en 1440. Qu'est-ce que c'est autre chose ? C'était maintenant la deuxième résolution la plus utilisée. Les six par 768. Il est principalement utilisé sur les ordinateurs portables, les plus anciens. Voici le truc. Voici un cadre 1366 avec une grille adaptée à cette taille. Ce rectangle est ici de 1200 pixels de large. C'est ici que le contenu va être placé. Et vous pouvez toujours voir qu'il y a un peu de place vide de chaque côté. C'est pourquoi je recommande 1200 pixels pour la zone active. Même sur les ordinateurs portables plus anciens, l'utilisateur va voir le site Web de manière décente. Je vais donc répéter que nous concevons à 1200 pixels car cela s'adaptera bien à plupart des écrans d'ordinateur et des ordinateurs portables, même les plus anciens. Maintenant, vous pouvez demander, appuyez sur, qu'en est-il de la grille 960 ? Bien sûr. En gros, c'est juste un peu plus étroit et malheureusement, les designs étroits ne sont tout simplement pas aussi beaux. La plupart des gens préfèrent vivre de grandes expériences immersives. Maintenant, si c'est le cas, vous pouvez dire, mais Chris, pourquoi s'arrêter à 12 h ? Pourquoi ne pas aller à 1400 ou 1600 ? Peut-être encore plus. Wikipédia occupe tous les écrans immobiliers, tout comme Amazon ou Netflix. Mais ce sont des exceptions et je ne peux pas les recommander. Vous aurez beaucoup d'ennuis si vous ne suivez pas mes conseils, moins commencez par. Les règles sont censées être enfreintes. Bien sûr, mais pas pour le moment. N'importe quel design que vous publiez, assurez-vous de suivre mes conseils. 1924, le cadre de 1200 pixels pour la zone active, 12 colonnes, marge de 360. Maintenant, avant que nous ne finissions, je veux que vous fassiez cela. Utilisez Maj R, qui révélera les règles à gauche et en haut. Donc, c'est expédié. Cliquez maintenant sur un guide et faites-le glisser chaque côté de la zone active ici. Et quand vous aurez fini ici, c'est là que je vais utiliser j'enregistre ces vidéos, je vais cacher la grille la plupart du temps. Et même lorsqu'il est activé , il sera maintenant à 10 %. Au lieu de cela, je pourrais l'utiliser à 3% ou quelque chose comme ça. Et c'est parce que c'est distrayant d'être honnête. Il y a beaucoup à examiner et à développer de nombreuses décisions de conception à prendre. Je veux que vous fassiez attention à ce que je fais et que vous ne soyez pas distrait par la grille. Je pense que c'est une expérience d'apprentissage bien meilleure. Pour masquer la grille, il suffit de cliquer ici sur cette icône et c'est tout. Ok, ça l'achève. Assurez-vous de vous souvenir de ces valeurs. 1920 et 1200 pixels, 360 de chaque côté, 12 colonnes. 24. Un aperçu des composants: Bienvenue de retour. Couvrons rapidement les composants dans Figma. Ils vous offrent beaucoup de contrôle et de flexibilité. Voici comment ça se passe. Disons que nous créons un bouton. Je vais commencer par un calque de texte, puis j' utiliserai Maj a pour activer la mise en page automatique. Alors, c'est vraiment une question de préférence. Je vais activer un remplissage, choisir la couleur que vous voulez. Je vais choisir le bleu ou quelque chose comme ça. Bien sûr, nous devons changer le texte en blanc pur. C'est logique. De toute évidence, nous voudrions peut-être l'agrandir un peu. La taille par défaut est beaucoup trop petite. Ok, puis arrondissez les coordonnées et ainsi de suite. Encore une fois, ce carrelage est subjectif, mais comme vous pouvez le constater, il faut beaucoup d' actions, n'est-ce pas ? Ce n'est rien de trop difficile, mais il y a beaucoup de clics. Maintenant que nous avons terminé un bouton, nous pouvons l'utiliser tout au long de notre conception, n'est-ce pas ? Disons un design de 50 pages. Mais comme toujours, le client arrive et il dit : Hé, je n'aime pas cette couleur, je n'aime pas ce fardeau. Ajoutez une icône, modifiez le rayon des coins, etc. En gros, changez tout. C'est là que le problème entre en jeu. Nous devons le mettre à jour dans de nombreux endroits. Nous pourrions maintenant changer la couleur si nous utilisons des styles de couleurs. Mais qu'en est-il du reste ? C'est pourquoi nous avons besoin de composants. Permettez-moi de supprimer toutes ces copies. Voici le fardeau original, non ? Sélectionnez-le et cliquez sur cette icône Créer un composant. Ensuite, je vais en faire glisser une copie. Disons que le client dit qu'il veut des bords carrés. C'est pas un problème. Vous y allez. Qu'en est-il de la couleur ? Il suffit de le changer. C'est aussi facile que ça. Mais que se passe-t-il si nous avons besoin d'ajouter une icône ? Eh bien, nous pouvons simplement le faire glisser et l' ajuster au besoin. Alors que je travaille. Voici la clé. Le clone droite est constamment mis à jour. C'est la magie des composants. Ils vous permettent de modifier le composant d' origine, puis tous les clones sont automatiquement mis à jour, quel que soit leur nombre. Permettez-moi de passer à un autre projet. Ici. Ce sont tous des boutons de base. En fait, ils sont constitués d' un rectangle et d'un calque de texte. Il ne s'agit donc même pas d'utiliser un cadre loin d'être idéal. Mais supposons que le client veuille modifier le style de ce bouton. Eh bien, tout d'abord, supprimons tous ces éléments de base parce que nous n'en avons pas besoin. Imaginez qu'un de vos collègues vient de remettre ce projet, n'est-ce pas ? Peut-être que vous l' avez téléchargé sur le Web ou quelque chose comme ça. OK, sélectionnons les deux premiers et utilisons Maj huit pour activer la mise en page automatique. C'est facultatif, mais la plupart des designers le préfèrent. Ensuite, allez au sommet de Figma et transformez-le en composant. Superbe. Maintenant, vous pouvez potentiellement modifier les copies de glisser-glisser comme ça. Mais si le projet est énorme et que sur de nombreuses pages, vous ne pouvez pas le gérer. Allez donc dans le panneau de gauche et passez aux ressources. Ici, vous allez trouver le bouton. Maintenant, faites-le glisser et placez-le partout ailleurs. C'est comme ça que vous êtes censé travailler dès le début, vous pourriez penser, mais Chris, si nous traînons constamment des choses de la barre latérale, ne pouvons-nous pas le faire à chaque fois le client change d'avis ? Il suffit de mettre à jour et de faire glisser les copies. Eh bien, oui, bien sûr, dans de petits projets comme celui-ci , bien sûr, c' est tout à fait très bien. Mais dans les plus grands, c'est un mal de tête majeur. Et gardez à l'esprit que je ne vais le faire qu'une fois après cela, commencez à changer le bouton, comme ça, trouver l'original et commencer à éditer encore, je ferai quelque chose d' évident pour que vous puissiez voir les changements. C'est ainsi que les composants peuvent vous faire gagner beaucoup de temps. De plus, vous pouvez modifier contenu du texte de n'importe quel clone par n'importe quoi d'autre, taper quelque chose, et c'est tout. Mais si vous changez le style original, celui-ci va emboîter le pas. Il mettra à jour la taille, la famille de polices avec tout ce que vous avez fait dans l'original. Et les composants ne sont pas seulement dotés de boutons. Vous pouvez les utiliser pour presque tout ce que vous pouvez penser. Mais passons pas à pas. Tout d'abord, comment savoir quel est le bouton d'origine et quels sont les clones ? Eh bien, l'original s'appelle officiellement le composant principal. Si nous passons au panneau Calques, ce symbole s'affiche. J'ai remarqué que c'est rempli. Il s'agit d'une masse de ce composant et c'est ici que vous effectuez toutes vos modifications et elles seront réparties sur tous vos clones. Les clones sont en fait appelés instances. Encore une fois, les clones ou les instances sont la même chose. Et c'est leur symbole. Celui-ci est vide. Il est donc assez facile de se souvenir rempli pour l'original, vide pour le clone. Une autre façon de procéder, cliquez sur n'importe quel clone et vous verrez cette option ici. Accédez au composant principal. Juste comme ça. Vous savez maintenant où trouver l'original. Mais que se passe-t-il si vous avez supprimé par erreur ? Ne vous inquiétez pas. Cliquez sur OK prêt et vous verrez cette option appelée Restaurer le composant. Figma a nos arrières. Bon, passons une pause et récapitulativement. Les composants sont un excellent moyen d'accélérer votre travail. Sélectionnez n'importe quel cadre, n' importe quel dossier , n'importe quel élément, puis utilisez cette icône en haut. La plupart des gens préfèrent activer la mise en page automatique. Avant cela, je vous suggère faire glisser des copies depuis le panneau des ressources. Vous pouvez également le faire à partir de la toile. Mais en tant que panel, c'est là que cette guerre est essentiellement là. Quand vous voulez vous assurer que c'est bien, le composant musulman, alias le bouton d'origine. Vous pouvez le reconnaître à l'aide de ce symbole dans le panneau Calques. Vous pouvez également cliquer sur n'importe quel clone et vous aurez la possibilité d'accéder au composant principal. D'accord, pour y revenir, vous pouvez apporter des modifications sur vos instances et elles resteront telles qu'elles sont même si vous modifiez le composant principal. voici un exemple. Je vais faire quelque chose de juste. Leur ami. Je vais désactiver le remplissage. Je vais garder un accident vasculaire cérébral. Je vais changer la couleur du texte. Encore une fois, radicalement différent, non ? Inutile de travailler pour celui-là. Au fait, je veux que vous remarquiez que les autres instances, donc l'autre, les clones, restent les mêmes. Maintenant, passons à l' original et changeons, disons la famille de la forme, n'est-ce pas ? Je vais passer à Montserrat. Découvrez comment tout est mis à jour, y compris celui-ci. Je vais également augmenter la taille que vous puissiez voir les différences. Et encore une fois, il suivra pas même si nous y avons apporté quelques modifications. Et si nous changeons d'avis, ce qui est génial, c'est que nous pouvons aller ici et que vous allez trouver cette option appelée réinitialiser tous les remplacements. Dans ce cas, il efface toutes nos modifications. C'est la puissance des composants, mais ce n'est qu'une vue d'ensemble. Nous en parlerons davantage à un rythme plus lent lorsque le moment sera venu. À ce stade, je veux que vous vous entraîniez avec cette situation spécifique à l' aide d'un bouton. Utilisez ce projet et revenez sur toutes mes étapes. Supprimez tous ces autres boutons, utilisez la mise en page automatique sur ce premier, transformez-le en composant, puis amusez-vous simplement avec. Voyez ce que vous pouvez changer dans ce que vous ne pouvez pas changer. S'il vous plaît, approchez-le avec une attitude détendue. Maintenant, je n'ai pas mentionné quelques éléments au sujet des composants et c'est totalement intentionnel. Nous allons aborder des choses plus avancées plus tard. Il y a également une feuille de triche attachée au rapport de mémoire. Et avec cela, s'il vous plaît, allez vous amuser un peu. 25. Dessins et projets dans Figma: Bienvenue de retour. Je veux prendre une minute et expliquer les limites du plan gratuit et Figma, il y a beaucoup d' informations à couvrir. Et c'est parce que Figma est conçu pour les projets qui contiennent des centaines d'écrans. C'est pourquoi tout ce qui arrive est si complexe. La bonne nouvelle, c'est que vous n'avez pas à le mémoriser. Vous n'êtes pas obligé de mémoriser quoi que ce soit. Asseyez-vous et détendez-vous. D'accord, sur l' écran de bienvenue dans le panneau de gauche, vous avez la possibilité de créer une équipe. Vous devriez le faire même si vous prévoyez de travailler seul pour le moment. J'ai déjà Mindset up et je peux cliquer dessus avec le bouton droit de la souris pour le renommer. C'est ici que nous pouvons créer un projet. Je vous recommande d'utiliser le nom de l'entreprise pour laquelle vous travaillez. Donc, si vous reconcevez, cela a fière allure. Dotnet, c'est mon blog. C'est ce que j'écrirais ici. Il suffit donc de saisir le nom de l'entreprise. Lorsque vous cliquez sur votre projet, il sera d' abord vide. Mais le côté droit vous raconte l'histoire du plan gratuit Figma. Vous obtenez trois fichiers de conception figma et le seul projet, ce qui signifie celui que nous venons de créer. Permettez-moi d'expliquer comment cela fonctionne. Comme je viens de le dire, je vous recommande de nommer vos projets en fonction du nom de l'entreprise. Donc, si vous travaillez pour Uber, saisissez-le, vous pouvez toujours cliquer avec le bouton droit de la souris et renommer le projet. Bon, maintenant, vous pouvez penser à un projet comme un jeu de société. Tous les jeux de société ont une boîte qui retient toutes les pièces ensemble, n'est-ce pas ? Si vous avez des jeux de société différents, vous devriez avoir des boîtes différentes pour chacun d'entre eux, n'est-ce pas ? Et c'est parce que vous ne voulez pas mélanger des morceaux entre eux. Ce serait absolument horrible, n'est-ce pas ? Vous devez les garder séparés en tout temps. C'est pourquoi nous avons des projets visant à conserver tous les fichiers liés à cette entreprise dans sa propre boîte. C'est très similaire aux dossiers de votre système d'exploitation, n'est-ce pas ? Supposons que trois jeux soient installés sur votre système. Vous devriez avoir trois polices différentes, n'est-ce pas ? Si vous installez les trois gains dans un seul dossier, les fichiers seraient mélangés ensemble, et ce serait évidemment un cauchemar. Il est très logique d'être organisé. C'est donc un projet, une grosse boîte ou un dossier qui conserve tous les fichiers ensemble. Mais quels fichiers entrent dans le projet ? Fichiers de conception Figma. Ce fichier FIG, c'est-à-dire ce que nous venons de créer avec Control N word en utilisant ce bouton dédié en haut à droite. Maintenant, si nous passons à l'onglet récent, vous verrez beaucoup de fichiers ici. Imaginez que ces deux-là soient destinés au projet OBOR. Il suffit de cliquer dessus et de les faire glisser dans notre projet. C'est aussi simple que ça. Vous pouvez donc faire glisser des fichiers de droite vers la gauche. Passons maintenant projet récent et passons à la caisse. Dans cette boîte, nous avons les deux fichiers que nous venons de déplacer. Imaginez que c'est le design de l'application mobile et celle-ci est la meilleure version. Il est logique de les séparer parce que les projets sont très différents pour la même entreprise, mais encore une fois, différents types de projets, n'est-ce pas ? Ou peut-être que l'un d'entre eux contient les cadres de richesse. Ou peut-être avez-vous les sources d'inspiration ou peut-être que certaines notes du client pourraient être une présentation que vous avez faite pour le client. Les grands projets peuvent comporter des dizaines de fichiers différents. Si vous venez de Photoshop, vous pouvez les considérer comme des fichiers PSD individuels. C'est ce qu'ils sont en fait, des fichiers individuels à points FIG. Mais au lieu de les enregistrer sur votre disque dur de votre ordinateur, ils sont enregistrés sur le Cloud. Maintenant, arrêtons un instant pour résumer un projet. Celui-ci peut contenir plusieurs fichiers de conception. Ces fichiers de conception peuvent être à peu près tout ce qui est lié au projet. Le plan trois Figma vous permet d'avoir trois fichiers. C'est ça. OK, déplacé vers l'onglet récent et faites-en glisser un autre. Revenez maintenant au projet et remarquez le message, mettez à niveau pour les fichiers de conception illimités. C'est donc la limite avec les trois fichiers du plan Figma trois. Maintenant, le prix est en baisse, mais que se passe-t-il si vous ne voulez pas payer ? Je ne le recommande pas, mais c'est là. Lorsque vous créez un projet aléatoire comme ça. Permettez-moi de créer un rectangle simple avec une couleur vive. Maintenant, lorsque vous le fermez, il est automatiquement enregistré. La question est de savoir où pas récemment, ne vous laissez pas berner. Au lieu de cela, il a été enregistré ici, sous les brouillons. Ici, vous pouvez avoir autant de fichiers que vous le souhaitez. Donc, fondamentalement, c' est le travail autour. Vous pourriez potentiellement laisser tous vos fichiers ici. Vous ne pouvez pas les partager avec un autre concepteur pour travailler ensemble, mais vous pouvez les présenter à votre client et vous pouvez renommer chaque fichier en quelque chose comme Uber, iOS ou Android, Uber ordinateur de bureau et ainsi de suite. Il n'est évidemment pas aussi bon que pas aussi bien organisé. Mais si vous n'êtes qu'un débutant, c'est tout à fait très bien pour commencer. Et après avoir gagné quelques milliers de dollars grâce à votre travail de conception, vous devriez passer à un forfait payant plus que celui-ci. De plus, vous avez la possibilité de rechercher vos fichiers tant que vous les nommez correctement, vous ne devriez pas avoir de problèmes. Maintenant, pour résumer, il s' agit de la façon dont vous organisez les choses. n'y a pas de bonne et de mauvaise façon, mais il existe des pratiques exemplaires. Il est préférable d'avoir un projet à gauche pour chaque entreprise pour laquelle vous travaillez. À l'intérieur de ce projet, vous pouvez avoir plusieurs piles de conception. un pour la conception de la newsletter, l' autre pour les médias sociaux 14, l'application iOS pour la version mobile et ainsi de suite. Voici maintenant une chose que vous pouvez faire pour les projets de très grande envergure. À l'intérieur de ces dossiers. Vous pouvez avoir des pages et des pages qui vous aident à mieux organiser les choses. Par exemple, dans le fichier de médias sociaux, ce qui peut être beaucoup de choses. Vous pouvez disposer de pages distinctes pour YouTube, Facebook, TikTok, Pinterest, Instagram, etc. C'est vrai ? Encore une fois, ce n' est qu'un moyen d' organiser un projet massif qui peut contenir des dizaines, voire des centaines d'écrans. Figma peut être utilisé pour les plus grands projets du monde avec des thèmes regroupant des dizaines de concepteurs, chefs de projet, de chefs de produits, testeurs, de développeurs, etc. projets littéralement de 100 000$. Et quand il y a tellement d'écrans et que tant de personnes sont impliquées, c'est le genre de chose qui vous aide vraiment. Il faut être incroyablement organisé. Mais pour revenir au monde réel, vous n'avez pas à vous soucier de tout cela. Je vous apprendrai étape par étape à créer un nouveau fichier et de nouvelles pages, etc. Soyez donc patient et ne vous inquiétez pas si vous ne comprenez pas complètement tout cela. Au fur et à mesure que nous poursuivons le cours, je promets qu'il aura de plus en plus de sens. Mais à l'heure actuelle, vous connaissez les limites du plan gratuit, d' un projet et de trois fichiers individuels. Vous savez que la robe est un endroit où tout est stocké par défaut. Et que vous ne pouvez pas inviter d'autres concepteurs à travailler avec vous sur ces projets. Mais même avec les brouillons, vous pouvez partager votre travail avec le monde entier dans le sens de le montrer avec la vue. Et avec cela, continuons. 26. Voici de vous faire un bon concepteur de Web: Quand je pense à ce qui fait un bon concepteur web, je pense toujours à ces trois choses. Une exécution parfaite des pixels, une compréhension des besoins du client et de l'attention portée aux détails. Nous allons parler de ces choses en détail. Mais je tiens à souligner un point extrêmement important. Ne vous laissez pas rattraper dans charges de travail avancées au début. Sinon dit, Ne pensez pas que si vous apprenez Figma à un niveau très élevé, vous deviendrez automatiquement un grand concepteur web. Permettez-moi d'expliquer ce que cela signifie. Vous voyez, Figma est un outil incroyablement puissant conçu pour bien, utilisé par des professionnels du monde entier, des pigistes aux grands studios de design. Maintenant, si vous parvenez à maîtriser ces fonctionnalités avancées, Figma, je peux vous aider à créer des projets impressionnants en un rien de temps. Vous pouvez travailler avec des systèmes de conception. Vous pouvez partager des ressources avec une équipe, vous fier aux composants, invariance, à utiliser des contraintes pour créer facilement des états réactifs. Encore une fois, des choses vraiment avancées. Et je sais que vous ne connaissez pas ces deux termes. Voici donc un exemple rapide. Je peux facilement modifier le jeu de couleurs pour faire quelques clics. Ce pouvoir de compréhension de figma possède des capacités. Je peux également modifier ma topographie avec la même facilité. Je peux changer ce texte sombre en quelque chose d'un peu plus dynamique et vous pouvez voir comment cela fonctionne simplement, n'est-ce pas ? Peut-être que le client souhaite les catégories au-dessus de cette zone, pas un problème. Cette disposition est construite d'une manière où cela ne demande littéralement aucun effort. Je peux basculer un interrupteur et je peux changer le style d'un fardeau comme ça. Il y a quelques années, cela aurait pris beaucoup de temps. Et c'est en surface. Il y a tellement plus de capacités dans Figma. Mais voyez si vous laissez le début de votre voyage, cela pourrait vous faire tourner la tête. Cela pourrait vous décourager. Encadre la variance des composants avec l'enfer de ces choses. Cadres dans les cadres avec mise en page automatique. C'est pourquoi j'ai réalisé cette vidéo. Pour vous dire cela, s'il vous plaît, ne vous concentrez pas sur ces choses. C'est génial de les apprendre. Ne vous méprenez pas. C'est génial de construire votre projet avec les techniques les plus avancées et les meilleures pratiques possibles. Mais c'est tellement intimidant et ça pourrait vous donner envie d'abandonner. C'est pourquoi je voulais vous parler de ce truc apparemment compliqué. Cela ne fera pas de vous un super concepteur Web. Les choses les plus avancées ne vous feront pas du succès du jour au lendemain. Au lieu de cela, voici ce que je propose. Veuillez comprendre les trois principes que je vais mentionner dans ce cours. Une exécution parfaite des pixels, une compréhension des besoins du client et de l'attention portée aux détails. Ceux-ci ont peu à voir avec Figma. Si vous vous concentrez sur eux et que vous les comprenez, le reste sera mis en place. De plus, vous pouvez travailler dans n'importe quel programme de conception, que soit chez Figma et Adobe XD sketch et n'importe quoi d'autre. Mais n'arrêtez pas d'en apprendre davantage sur la conception Web car vous ne comprenez pas fonctionnement de certaines fonctionnalités avancées. Ces éléments sont tous facultatifs, variance, contraintes et autres. Ils ne sont pas indispensables. À temps. Vous allez les apprendre. Je vais vous en apprendre davantage sur eux, mais ils sont essentiels dans les principes. Je vais donc le dire une dernière fois. Ne laissez pas ces fonctionnalités avancées vous effrayer. Ils ne sont pas essentiels pour que vous deveniez un grand concepteur web. Vous allez les apprendre en temps voulu. Et avec cette pression sur vous-même, nous pouvons continuer avec une attitude plus détendue. 27. Que faire ensuite ?: Salut, c'est Chris. Félicitations, je suis vraiment content que vous soyez arrivé à ce moment-là. J'espère que vous avez vu à quel point Figma peut être génial, vos activités et vos exercices. Mais il faut noter qu' il y a beaucoup plus à déballer. Je vous suggère de vérifier mon profil afin que vous puissiez commencer la prochaine étape de votre voyage. Figma est utilisé par les plus grandes entreprises du monde pour des projets de conception Web et d'applications. Donc, mon conseil, c'est de la chaleur, voir de quoi il s'agit. Il y a beaucoup de buzz autour de Figma. Tout le monde en parle. Et dans cette partie, nous venons de gratter la surface. Il y en a un troisième à déballer. Donc, avec ça, j' espère que je vous verrai dans la prochaine partie de votre voyage. N'oubliez pas, continuez à apprendre, continuez à grandir C'est le baron de la presse qui s' inscrit pour le moment.