NOUVEAU Figma 2024 : Pour commencer du cours débutant au professionnel

1. 00 Introduction Débutant + Exercice: Aujourd'hui, je vais vous faire découvrir le monde de Figma. Apprenons à donner vie à nos idées grâce aux incroyables fonctionnalités de Figma Nous apprendrons tout sur configuration et la création de conceptions de base, travaillant avec des composants pour créer des éléments de conception réutilisables. Configuration de styles et de variables pour garantir la cohérence et hiérarchie des couleurs, de la typographie et de l'espacement, conception réactive avec mise en page automatique pour s'adapter aux différentes tailles d' écran, prototypage de base pour donner vie à votre design, et comment partager et collaborer avec d'autres designers et surtout des développeurs pour que votre design soit codé Nous partirons de zéro en créant notre compte Figma et en nous familiarisant avec la structure du feu Génial. Nous aborderons ensuite les principes fondamentaux, tels que la configuration des cadres et leur imbrication, l' ajout de formes, de texte, de couleurs et de grilles, ainsi que la création d'une interface utilisateur solide Une fois que vous serez à l'aise avec les bases, nous veillerons à ce que vos designs ne soient pas simplement de jolies photos, mais qu'ils soient également hautement fonctionnels et évolutifs. Je vais vous montrer comment créer des éléments de design réutilisables avec des composants et des variantes , essentiels à la conception d'interfaces utilisateur modernes. Nous créerons des variables et des styles pour définir et réutiliser la couleur, la typographie et l'espacement, afin de garantir la cohérence tous les projets et de permettre des modifications rapides de votre conception Comprendre ces fonctionnalités et les documenter efficacement est essentiel pour une communication fluide avec le développement Ensuite, nous adapterons nos conceptions à l'évolution du contenu et de la taille de l'écran, en utilisant la mise en page automatique et les contraintes. Vous verrez qu'avec la bonne approche, c'est beaucoup plus facile que vous ne le pensez. Maintenant, donnons vie à nos designs et ajoutons un peu de prototypage de base au mix Pour terminer, je vais vous montrer comment partager votre design avec d'autres designers à l'aide de bibliothèques d'équipe partagées. Et probablement l'un des sujets les plus importants mais souvent négligés. Nous expliquerons comment documenter et partager vos conceptions afin faciliter la communication et la collaboration avec le développement. Tout au long du cours, j'aborderai des questions courantes telles que comment choisir la bonne taille d'écran, quand utiliser des variables plutôt que des styles, et je partagerai de précieux raccourcis, conseils et astuces, ainsi que de petits joyaux cachés. Je vais vous fournir un fichier d'exercices Figma, qui vous permettra de suivre la vidéo étape par étape à mes côtés Une fois que nous aurons maîtrisé l'essentiel, nous les appliquerons à un projet réel, créant un design de podcast entièrement réactif basé sur des composants prêt à être utilisé dans votre portfolio. Je reste bref et précis, afin que vous puissiez en un rien de temps découvrir tout ce dont vous avez besoin sur Figma pour aborder n'importe quel projet Ce cours est fait pour vous si vous êtes un débutant total ou de passer d'un autre logiciel de conception. Il s'agit du cours de Moon learning point AO. 2. 02 Qu'est-ce que Figma ? Qui s'occupe du codage ?: Alors, qu'est-ce que Figma ? En bref, Figma est un logiciel de conception d' interface utilisateur, également connu sous le nom de logiciel de conception d'interface utilisateur Dans Figma, vous pouvez créer des cadres métalliques interactifs, configurer des conceptions d' interface utilisateur avancées et créer des prototypes impressionnants Ce qui est génial, c'est que Figma fonctionne à la fois pour Mac et PC. Vous pouvez l'utiliser dans votre navigateur Web ou connecter l'application de bureau. Figma vous fournit tous les outils dont vous avez besoin pour concevoir pour le Web ou les applications, tels que l'utilisation de composants, configuration de styles et de variables, outils de conception réactive, ainsi que des informations automatisées pour les développeurs C'est vraiment la combinaison de ses incroyables fonctionnalités qui rend FIMAS si spéciale et la positionne comme le leader du secteur FIMA est basé sur le cloud, ce qui en fait le choix idéal pour collaborer avec d'autres designers ou partager vos conceptions avec le développement Vous pouvez concevoir avec d'autres personnes en temps réel, ce qui vous permet, à vous et à votre équipe, de travailler simultanément sur le même projet afin de rester parfaitement alignés. Okay MA est incroyablement convivial et offre une courbe d'apprentissage douce pour les débutants, mais il peut également être amené à des niveaux très avancés pour l'alignement sur le code et la création de systèmes de conception complexes. Maintenant, une question que j'entends souvent est si j'ai conçu un site Web dans Figma, comment devient-il un véritable site Web ? Est-ce que Figma fait ça ? Est-ce que Figma fait le codage Eh bien, désolée, mais non. Figma fournit d'excellents outils pour faciliter collaboration entre la conception et le développement, tels que le mode def, où vous pouvez voir un extrait de code CSS, informations sur le code, inspecter des composants, etc. Mais il n'existe pas de bouton de publication. Vous avez donc besoin d'un développeur compétent pour cela. Pour les sites Web simples, vous pouvez également utiliser des outils tels que Webflow ou Framer, en utilisant Figma comme base pour planifier et configurer votre 3. 01 Figma dans le navigateur et le comparateur: Vous pouvez travailler avec Figma de deux manières. Vous pouvez soit travailler directement dans le navigateur , comme vous le voyez ici, soit télécharger l'application. Pour télécharger l'application, rendez-vous figma.com Forward Slash Vous pouvez ensuite choisir entre la version MC et la version Windows. Il est très important de noter que même si vous travaillez dans l'application de bureau, Figma reste basée sur le cloud Cela signifie que tous vos fichiers seront stockés dans le cloud et non localement sur votre ordinateur. Par conséquent, vous avez toujours besoin d' un accès à Internet pour travailler sur vos fichiers Figma Vous pouvez exporter et stocker un fichier Figma localement, mais vous ne devriez vraiment le faire qu'en cas d'urgence, exemple si vous devez terminer un projet et que vous savez que vous n' aurez pas accès à Internet Cela peut entraver la collaboration avec votre équipe Par conséquent, il est toujours préférable de tout laisser dans le cloud tel que prévu. Outre l'application de bureau, Figma Mirror pourrait vous intéresser pour prévisualiser vos créations sur votre mobile ou votre tablette Et au cas où vous ne seriez pas en mesure d'utiliser l'application de bureau et que vous utiliserez uniquement la version du navigateur. Je recommande vivement de télécharger le programme d'installation des polices. Cela vous donnera accès à toutes vos polices locales. Cela ne sera toutefois pas nécessaire lors de l'utilisation de l'application. 4. 02 Le navigateur de fichettes Figma – La maison de Figma: Le navigateur de fichiers Figma, ou en d'autres termes, Figma Home Lorsque vous ouvrez Figma pour la première fois, vous verrez quelque chose de similaire Il est peut-être vide ou vous avez peut-être déjà des fichiers. C'est l'endroit où vous organisez vos fichiers et vos équipes. Avant de créer notre premier fichier, assurons-nous de bien comprendre la structure du fichier Figma, qui est un peu étrange au début. Mais joue juste avec moi. Tout d'abord, nous avons des équipes. Ils peuvent être destinés à votre propre travail ou à une collaboration. Au sein des équipes, nous avons ensuite des projets, que vous pouvez utiliser pour regrouper des fichiers dans différents projets au sein d'une équipe. Sur le plan gratuit, vous bénéficiez actuellement d'un projet gratuit. Dans un projet, vous pouvez désormais avoir plusieurs fichiers, qu'il s' agisse de fichiers Fig JEM ou de fichiers de conception C'est dans ces fichiers que vous devez effectuer le travail proprement dit. Vous pouvez les structurer davantage en pages. Revenons-en à la réalité. Ici, vous pouvez voir l'équipe. Vous pouvez faire partie d'une seule équipe, ou vous pouvez ouvrir le menu déroulant et passer d'une équipe à l'autre laquelle vous pourriez être invité. Vous pouvez également créer vos propres équipes, il vous suffit de cliquer sur le bouton plus et de nommer votre équipe. Ensuite, vous pouvez choisir si vous souhaitez inviter d'autres personnes. Nous pouvons ignorer cela pour le moment. Vous pourrez toujours inviter plus tard. Choisissez un plan d'équipe. Vous pouvez toujours opter pour une démarrage, puis une mise à niveau ultérieure si vous avez besoin de fonctionnalités supplémentaires. Vous verrez ensuite l'équipe que vous avez créée en haut de la page. Pour supprimer l'équipe, utilisez simplement un petit menu déroulant et choisissez de supprimer. Comprenons un peu mieux la structure de l'équipe. C'est donc au sein de notre équipe que nous trouvons les projets. Le mot projet est un peu confus. Cela vient de l' ancien temps de Figma. De nos jours, un projet peut vraiment être utilisé pour absolument n'importe quoi. Voyez-le simplement comme un autre sous-dossier et une autre couche d'organisation. Vous pouvez y stocker tous les fichiers que vous voulez et vous pouvez les nommer comme vous le souhaitez. Si nous cliquons sur nos projets, vous y trouverez vos fichiers. Cliquez sur n'importe quel fichier pour l'ouvrir, et un nouvel onglet s'ouvrira. Vous pouvez ouvrir autant d' onglets que vous le souhaitez. À l'intérieur de votre fichier, sur le côté gauche, vous pouvez voir différentes pages qui structureront davantage votre fichier. Si vous souhaitez revenir à votre navigateur de fichiers, cliquez sur une petite icône d' accueil en haut à gauche. Vous pouvez voir que votre fichier reste ouvert, et d'ailleurs, tout est automatiquement enregistré dans Figma Petit conseil, une fonctionnalité très pratique est que vous pouvez marquer des projets ainsi que des fichiers comme favoris. Ici, par exemple, si je l'enlève, vous pouvez voir ici que j'ai mes fichiers de démarrage. J'aime bien marquer tous les projets comme pertinents, pour avoir une meilleure vue d'ensemble ici. en va de même si vous cliquez ici, nous pouvons maintenant commencer, et vous pouvez également avoir des fichiers importants pour un accès rapide. D'ailleurs, cela n'est visible que pour vous. C'est également très pratique car de cette façon, par exemple, si vous souhaitez déplacer des fichiers entre des projets, vous pouvez simplement le faire via le navigateur ici. Vous pouvez également inviter d'autres personnes à rejoindre votre équipe, revenir à l'aperçu , puis cliquer sur le bouton Partager. Ici, vous pouvez inviter par lien ou par e-mail. Très important, assurez-vous de choisir si vous invitez simplement à consulter ou à modifier. Si vous choisissez Modifier, assurez-vous de vérifier le plan tarifaire Figma que vous avez, car cela peut entraîner un coût supplémentaire par abonnement. Vous pouvez toujours modifier le type de droits et également annuler les droits en cliquant simplement sur la petite flèche ici et en accédant à la vue Admin où vous pouvez trouver tous les paramètres Un dernier petit domaine d'intérêt pourrait être la communauté. Parfois, vous voyez un petit globe là-haut ou vous pouvez trouver le globe pour explorer la communauté d'ici. Ça bouge pas mal. Si vous cliquez dessus, vous entrez dans la communauté Figma, et c'est un endroit vraiment génial où vous pouvez trouver de nombreuses ressources gratuites, différents fichiers, plugins N'hésitez pas à vous lancer et à regarder ce que d'autres personnes ont déjà créé pour vous 5. 03 créer des fichiers de design: Créons un nouveau fichier de design dans Figma. Vous avez peut-être remarqué que dans Figma, vous devez choisir entre créer un Jamboard figé, un fichier de design ou un diaporama Nous allons travailler uniquement avec des fichiers de conception. Ils sont là pour configurer vos designs. jamboards FIC sont davantage destinés brainstorming, à la collaboration et Le diaporama, comme son nom l' indique, est destiné à la présentation. Cependant, vous pouvez également configurer votre présentation uniquement avec des fichiers de conception. Mais ne t'inquiète pas. Nous y reviendrons au cours de ce cours. Créons un nouveau fichier. Vous pouvez soit créer un nouveau projet et y ajouter des fichiers, soit utiliser un projet existant pour double-cliquer dessus pour l'ouvrir, et vous allez maintenant trouver en haut le bouton pour créer un nouveau bouton. Nous allons opter pour un nouveau dossier de conception. Cela a créé un nouveau fichier et il l' ouvre immédiatement dans un nouvel onglet. Vous pouvez toujours revenir ici à votre tableau de bord, puis vous pouvez voir ici notre nouveau fichier sans titre Si nous voulons le renommer, nous pouvons le faire directement dans le fichier double-cliquant sur le nom Vous pouvez également le déplacer d'ici. Utilisez simplement cette petite erreur, puis vous pouvez cliquer sur Déplacer déplacer vers n' importe quel autre projet. Nous pouvons également faire de même à partir de notre projet. Voici notre dossier. Nous pouvons ensuite cliquer avec le bouton droit de la souris, puis vous pouvez le renommer, et vous pouvez également déplacer le fichier Ou vous pouvez simplement le faire glisser. N'oubliez pas que j'aime mettre en vedette mes projets. les mettant en vedette ici, ils apparaissent dans la barre latérale, ce qui facilite grandement le déplacement de vos fichiers. Généralement, les fichiers de Figma sont toujours partagés dans le navigateur de fichiers. Cependant, si vous recevez un fichier à télécharger, exemple un fichier qui se termine par un point fig. Pour le voir dans votre navigateur de fichiers, assurez-vous d'utiliser le bouton d'importation. Cela ne fonctionnera pas simplement en double-cliquant dessus. 6. 01 Ajouter des cadres à notre fichier: Commençons par une base de tout ce qui se trouve dans Figma. Cadres. Assurez-vous que vous êtes dans un fichier de conception. Cette zone grise que vous voyez ici au centre s'appelle un canevas. Pensez-y comme à la surface d'une table sur laquelle vous travaillez. En plus de cela, vous ajouterez vos dessins comme des feuilles de papier. Dans Figma, ces feuilles sont appelées cadres. Vous pouvez ajouter des images, des textes et des formes à ces cadres pour configurer vos designs. Pour créer un cadre, il suffit cliquer sur le symbole du cadre dans la barre d'outils, ou vous pouvez également utiliser le raccourci F. Nous ouvrons maintenant le menu des cadres prédéfinis Figma sur le côté droit Comme vous pouvez le constater, Figma a configuré les tailles d'écran les plus courantes pour vous Si je clique sur l'un d'entre eux, le cadre de cette taille sera ajouté à mon Canvas. Si vous ne recherchez pas une taille d'écran spécifique, vous pouvez également dessiner un cadre. Appuyons donc à nouveau sur F, puis nous pouvons simplement faire glisser un cadre pour l'ouvrir sur notre canevas. Ce qui est génial, c' est que si je sélectionne ce cadre et que je reviens à la liste déroulante des cadres, je pourrais également le transformer en n'importe lequel de ces préréglages Vous pouvez utiliser un raccourci pour centrer tout ce que vous voulez sur votre Cvas. Deux choses se sont produites. Figma a ajouté ces cadres à notre toile, et nous pouvons également les voir dans notre panneau de couches de gauche Le panneau des couches est essentiellement un miroir de tout ce qui se passe sur les cavas Vous pouvez renommer vos cadres. Vous pouvez soit cliquer directement sur le nom du cadre, puis simplement taper ce que vous recherchez, soit cliquer sur le nom dans le panneau des couches. Nous utilisons toujours des cadres et jamais des formes pour représenter nos écrans dans Figma Contrairement aux plans de travail traditionnels, vous pouvez imbriquer des cadres dans des cadres dans Figma, ce qui vous permettra de créer des mises en page plus complexes ultérieurement 7. 02 Quelques raccourcis pratiques: Quelques raccourcis pratiques. En général, vous trouverez une vue d'ensemble de tous les raccourcis en accédant au menu d'actions puis en recherchant des raccourcis clavier. Vous en verrez certains marqués en bleu, ceux que vous avez déjà utilisés, et ceux en blanc, ceux que vous n'avez pas encore utilisés. Je veux vous montrer les plus importants pour le moment. Pour masquer et afficher l'URL, vous pouvez appuyer sur la touche Commande et sur la barre oblique inversée Si vous appuyez sur Shift et sur la barre oblique arrière, cela ne se masquera que sur le côté gauche Dès que vous aurez sélectionné quelque chose sur votre Canvas, vous verrez toujours toutes les propriétés sur le côté droit, est très pratique si vous avez besoin d'un peu plus d'espace. Vous pouvez zoomer ou dézoomer en appuyant sur la commande n plus ou sur la commande moins. Si vous appuyez sur Shift et sur zéro, vous obtenez une vue à 100 %. Si vous appuyez sur Shift et sur un, vous obtenez un aperçu de tout ce qui se trouve sur votre Canvas. Si vous sélectionnez un élément spécifique et que vous appuyez sur Shift et deux, il zoomera uniquement sur cet élément. Si vous appuyez sur Entrée, les enfants directs de cet élément seront sélectionnés . En appuyant sur la barre d'espace, vous pouvez vous déplacer dans le Canvas. 8. 03 Aperçu du ficher design: Voici un bref aperçu de notre dossier de conception avant de nous plonger plus en profondeur. Par défaut, votre onglet de fichier sera ouvert et affichera vos couches. Il existe également d'autres robinets, nous avons donc les fichiers, les actifs, le design et le prototypage Mais restons dans les dossiers pour le moment et apprenons à le savoir. Vous pouvez voir ici que vous avez également quelque chose appelé pages, et si vous cliquez sur un petit bouton plus, vous pouvez ajouter une page supplémentaire. Et il s'agit essentiellement d'un nouveau Cvas entièrement vide. Les pages peuvent servir à différentes fins, et nous en reparlerons plus tard. Vous pouvez généralement ajouter autant de pages que vous le souhaitez sur un forfait payant, mais sur un plan gratuit, vous pouvez être limité à trois. Si vous souhaitez donner un nom à une page, il vous suffit de double-cliquer pour modifier le nom, et en cliquant avec le bouton droit de la souris, vous pouvez supprimer une page. C'est notre panneau de gauche. Ensuite, sur le côté droit, nous avons le panneau des propriétés. Ce qui est très important, c'est que si vous cliquez sur la zone d'arrière-plan gris de votre canevas, vous obtenez une vue d'ensemble de ce qui se passe dans votre fichier. Plus tard, vous verrez tous les styles, les variables, donc tous les paramètres généraux. Si vous sélectionnez un cadre ou un élément spécifique tel qu'un texte ou une forme, vous obtiendrez les informations relatives à cet élément que vous avez actuellement sélectionné. Là-haut, vous pouvez voir qui figure dans votre dossier. Vous pouvez obtenir le mode présent, soit dans une autre zone, soit vous pouvez également avoir un aperçu du fichier, et vous trouverez également le bouton de partage ici. Tout cela, nous le découvrirons plus en détail plus tard. En bas, vous avez actuellement votre barre d'outils, et notez que ces éléments sont peut-être en train de bouger. Avant, c'était ici, au sommet. Vous trouverez ici tous vos principaux outils, tels que les cadres, toutes les formes , le texte, etc. Notez que si vous les survolez, vous obtiendrez le raccourci. Cela vaut vraiment la peine d'être noté, car cela accélérera vraiment votre flux de travail, si vous les connaissez. Vous trouverez également le menu des actions ici. Dans le menu des actions, vous pouvez rechercher littéralement tout ce qui concerne votre fichier, et vous trouverez également vos outils informatiques ici. Il y a une section pour les branchements et les Wichets. Encore une fois, nous allons en savoir plus sur les plug-ins dans une minute. Ici, vous trouverez le commutateur pour le mode sourd. Nous avons le mode design, dans lequel nous sommes actuellement, et nous pouvons passer en mode sourd si vous avez un forfait payant. C'est le domaine réservé à votre équipe de développement S'ils sélectionnent un élément, il obtiendra les informations pertinentes pour le code. Certaines de ces fonctionnalités peuvent être associées à un paywall. Cela change constamment, alors assurez-vous de consulter la page de tarification de la FICMA pour voir ce qui est actuellement disponible 9. 04 Ajouter des formes et des couleurs: Ajoutons du contenu à nos cadres. J'ai donc ici un cadre, que j'ai appelé cadre. Ajoutons maintenant quelques formes. Je vais utiliser l'outil de forme, et je peux choisir entre un rectangle, des lignes, une erreur, une ellipse et un polygone, ainsi qu' Maintenant, remarquez que derrière chacune de ces formes, vous allez voir le raccourci. Je vais opter pour un rectangle. Et si je le dessinais simplement, il ne garderait pas sa forme. Donc, si je veux un carré parfait, je peux maintenir la touche Maj enfoncée, puis je dessine. Je peux le sélectionner, puis le positionner et voir comment Figma va vous fournir des lignes d'assistance Dessinons maintenant un cercle. Donc, si je regarde mon menu, je vois que le raccourci est. Appuyons donc sur O. Et encore une fois, je maintiens la touche Maj enfoncée pour obtenir un cercle parfait, et je vais ajouter un cercle. Ajoutons une autre forme. Je vais opter pour un polygone. Celui-ci, je vais simplement dessiner comme ça. Maintenant, je remarque qu'il y a un peu plus d'espace. Sur le côté droit, vous pouvez voir qu'il compte maintenant jusqu'à trois. Vous pouvez déplacer celui-ci vers le haut, puis créer d'autres polygones Je vais m'en tenir à un triangle pour le moment. Ajoutons un peu de couleur à cela. Je vais commencer par mon cercle d'amis ici. Vérifiez que vous avez sélectionné la forme que vous recherchez. Ensuite, sur le côté droit, dans le panneau des propriétés, vous pouvez modifier une couleur par remplissage. Vous pouvez soit cliquer sur l'échantillon de couleur, puis simplement choisir n'importe quelle couleur, soit ajouter une couche Hx, c'est ce que je vais faire Je vais maintenant sélectionner mon triangle. Cette fois, je vais utiliser la roue chromatique, et je vais simplement opter pour un joli rouge orangé. Pour ce carré, je veux utiliser un bleu. Jouez avec le menu des fichiers pour vous familiariser. Vous pouvez utiliser l'opacité pour pouvoir simplement ajouter n'importe quel nombre. Vous pouvez rendre le remplissage visible et invisible, et vous pouvez même ajouter d'autres fichiers C'est cependant quelque chose que j'utilise rarement. Si vous cliquez sur cette montre, vous pouvez voir qu'ici, vous pouvez également modifier le dégradé, et nous pouvons le transformer en un remplissage d'image, ce que nous utiliserons plus tard. Nous pourrions également ajouter un trait. Maintenant, je pourrais l'ajouter à cet élément unique, ou je peux simplement sélectionner tous les éléments. Maintenez simplement la touche de votre souris enfoncée et sélectionnez tout. Je peux maintenant cliquer sur le bouton plus à côté du trait, et vous verrez qu' ils ont maintenant chacun un plan. Je pourrais remplacer le trait un trait plus épais , environ quatre. Si, par exemple, vous vouliez une ligne pointillée, vous pouvez le faire ici en cliquant sur les trois points et en passant de solide à da Comme vous l'avez fait pour le remplissage, vous pouvez changer la couleur du trait. 10. 05 Manipuler les éléments: Découvrons comment manipuler des éléments sur le canevas. Si vous sélectionnez un élément, vous verrez les propriétés dans le panneau de droite. Notez comment les différents éléments vont vous donner des propriétés différentes. Dans la première section, trouvez généralement le positionnement pour que cela fonctionne, sélectionnez plusieurs éléments, maintenez simplement la touche de votre souris enfoncée et vous pouvez maintenant les aligner. Vous pouvez voir ces petites lignes bleues par défaut, elles pointent toujours vers la gauche et vers le haut du cadre parent le plus proche, et vous pouvez voir le positionnement ici Vous pouvez donc le rendre très précis en saisissant simplement un nombre spécifique. Nous parlerons plus en détail du menu des contraintes plus tard, mais vous pouvez l'activer ou le désactiver, puis modifier les contraintes Les contraintes ont pour effet d'épingler littéralement ce que vous avez sélectionné dans une zone du cadre parent. Si je le change de gauche à droite et que je le redimensionne maintenant, vous pouvez voir qu'il est maintenant collé à droite, et que ceux-ci sont toujours collés à gauche Mais ne vous inquiétez pas trop pour le moment. Sélectionnons-les tous et renvoyons-les à nouveau. Plus bas, vous trouverez l'outil de transformation. Choisissons notre carré pour mieux voir les choses. Et avec cela, vous pouvez faire pivoter vos éléments. Vous pouvez le faire ici même dans le menu, ou vous pouvez également vous rapprocher de l'élément avec votre curseur, puis vous verrez cette petite erreur de modification. Une fois que vous voyez cela, maintenez votre souris enfoncée et vous pouvez désormais également faire pivoter le canevas vers la droite. Et ici, vous pouvez retourner des éléments, les faire pivoter, etc. Maintenant, cette partie en bas , la mise en page, c'est la partie la plus importante avec vos dimensions. Si vous avez sélectionné un élément, sélectionnons à nouveau notre cercle, puis vous pouvez voir un petit clip ici. Actuellement, il n'est pas découpé. Si je changeais cette largeur à 200, et vous pouvez voir qu'elle ne changera qu'un côté. Si je veux que les deux soient modifiés de la même manière, assurez-vous simplement que vous avez sélectionné le clip, et maintenant vous pouvez tout changer et il sera appliqué des deux côtés, c'est très pratique. L'avantage de ces champs est que vous pouvez non seulement taper des nombres, mais aussi les pouvez non seulement taper des nombres, utiliser pour effectuer des calculs de base, allant de la division plus moins à la multiplication. Comme pour la plupart des choses, tout ce que vous pouvez faire ici dans le panneau des propriétés, vous pouvez également le faire directement sur le Canvas. Au fur et à mesure que vous vous rapprochez, vous pouvez voir cette petite erreur ici. Vous devez vous rapprocher d' un bord pour que cela fonctionne. Et maintenant, si vous maintenez la touche Shift enfoncée, vous pouvez la redimensionner en maintenant les proportions en place Une petite astuce cachée. Si vous avez un cercle et que vous le survolez, vous verrez l'outil d'arc apparaître Si vous maintenez cette touche enfoncée, vous pouvez manipuler ce cercle encore plus à votre guise. Des trucs plutôt cool. Nous pouvons également ajouter un rayon d'angle, choisir un ou plusieurs éléments, puis, en apparence, vous trouvez le rayon d'angle, et vous pouvez l'ajouter simultanément à tous les coins, ou vous pouvez également ouvrir le menu des coins individuels, puis vous pouvez simplement l'appliquer aux coins de votre choix. 11. 06 Aligner, ranger et mesurer: Apprenons à aligner, à ranger et à mesurer entre vos objets Nous connaissons donc déjà l'alignement. Mais une autre option que j'aime beaucoup est que si vous sélectionnez plus d'options, vous obtenez la fonction de rangement ici Si vous passez la souris dessus, vous verrez ces petites poignées, ainsi que ces cercles Cela a donc mis de l'ordre et créé la même distance entre tous vos éléments Notez maintenant que j'utilise mon rectangle qui est toujours un polygone et qu'il se trouve à l'intérieur de sa forme Ce que je pouvais faire, c'est que maintenant, je pourrais tous les sélectionner, et je pourrais changer ces identifiants et il en sera de même pour tous. Je pourrais également utiliser le panneau des propriétés pour manipuler cela, car il va maintenant me donner l'espace entre ces éléments en tant que propriété propre. Vous pouvez également sélectionner n'importe laquelle de ces formes, puis la remplacer assez facilement dès qu'elle est rangée Maintenant, si nous les sélectionnons tous , ils ne sont pas encore alignés au centre. Vous pouvez cependant les sélectionner tous ensemble, les déplacer, puis Figma vous montrera également quelques lignes directrices pour placer le centre de votre cadre Un autre outil pratique que j'utilise tout le temps est que si vous sélectionnez une forme, que vous maintenez enfoncée et que vous survolez une autre forme, elle vous indiquera la distance Cela fonctionne jusqu'au bord du cadre parent ou de tout objet voisin, très pratique. Vous pouvez toujours le déplacer tant que vous l'avez sélectionné, puis vous verrez comment la distance change par rapport à cet objet. 12. 07 Ajouter et travailler avec du texte: Ajoutons du texte. Dans la barre d'outils, sélectionnez l'outil texte ou vous pouvez simplement appuyer sur t. Vous pouvez ajouter du texte de deux manières. Vous pouvez soit simplement cliquer n'importe où, ajouter le texte, puis commencer à taper. Vous pouvez également dessiner une zone de texte. Appuyons à nouveau sur T, et je vais dessiner une zone de texte, et je peux maintenant ajouter le texte ici. Peu importe l' approche que vous allez utiliser car vous pouvez toujours la modifier via le menu texte, c'est ce que nous allons apprendre maintenant. Je vais les garder tous les deux. Ce sera mon titre, et je vais garder celui-ci et simplement copier un autre texte factice, et nous pourrons l'utiliser comme copie Je peux ouvrir une zone de texte plus grande simplement en maintenant la touche de ma souris enfoncée et en la faisant glisser Tout d'abord, je veux qu'ils aient tous les deux le même type de visage. Je sélectionne les deux et via le menu, je vais sélectionner une police de caractères Vous pouvez constater que toutes les polices Google sont préinstallées si vous utilisez l'application Figma De plus, tous les téléphones que vous avez localement sur votre ordinateur apparaîtront ici. Je vais opter pour une police Google appelée Poppins. Maintenant, avant de changer la taille et la largeur, vous pouvez voir que c'est un peu partout. Mettons de l'ordre dans tout ça. Je vais d'abord choisir ce qui va être mon titre, et je vais le régler sur la largeur automatique Cela signifie que la zone de texte s'adaptera toujours à tout ce que j'ajoute ici en largeur. Mon texte de copie, je vais le régler sur une largeur fixe et une hauteur automatique. Cela signifie qu' il va prendre toute la hauteur et quoi que j'ajoute, il s'adaptera à cette hauteur. Le dernier ici est une hauteur fixe et une largeur fixe. Et pour être honnête, je ne m'en sers presque jamais. Sélectionnons nos formes, tirons-les vers le bas et libérons de l'espace. Alors maintenant, je veux changer le poids. Je peux le faire avec le deuxième menu déroulant, et je vais avoir mon titre en gras, et je vais laisser le texte de ma copie en mode normal Donc, évidemment, je veux que mon titre soit plus grand, afin de pouvoir le faire avec la taille du texte ici Vous pouvez taper n'importe quel chiffre ou utiliser les touches fléchées du clavier pour monter ou descendre. Encore une fois, si vous avez appuyé sur Shift, vous allez augmenter votre quantité de nug Je vais vous dire un grand bonjour en haut de la page. Maintenant, mon texte de copie, je vais avoir cette boîte encore plus grande, je vais m'en tenir à 16, qui est la taille standard pour le texte à copier. La suivante est la hauteur de la ligne. C'est une question vraiment importante. La hauteur de la ligne est la suivante : nous pouvons mieux le voir dans notre titre, ce petit espace en haut et en bas de votre texte C'est comme un écart naturel que nous sommes en train de créer. Laissez-le toujours au moins sur auto, ce qui correspond à 1,5, ou vous pouvez même aller plus haut et le régler sur 1,7. peux le calculer, donc vous pourriez dire que 16 est la taille de mon texte, et maintenant je le multiplie par 1,75, et par conséquent, cela me donnerait la valeur en pixels de 28 Vous pouvez également utiliser une notation en pourcentage, donc j'ai 175 % Si tout cela est nouveau pour vous, laissez-le sur automatique pour le moment, ce qui vous donne une très bonne hauteur de ligne. Quoi que vous fassiez, ne le réglez pas à la même taille que votre texte ou même à une taille plus petite. Parce que ce qui se passerait, c'est que vous perdriez la hauteur de la ligne, ce qui pourrait convenir pour un titre d'une seule ligne Mais dans le texte de votre copie ou dès que quelque chose est modifié, comme la zone de texte change, lorsqu'une fenêtre de navigateur change, texte sera écrasé, ce que nous ne voulons pas L'alignement est au centre gauche, donc assez standard. Ce petit outil signifie que si vous ajoutez du texte, dans quelle direction vous allez évoluer. La valeur par défaut sur laquelle nous l'avons activée signifie que si je copie plus de texte, ajoutons simplement plus de texte ici, il sera simplement ajouté en bas. Maintenant, si vous aviez mis cet ensemble au centre, alors ce qui se passerait, c'est qu'il augmenterait à partir du centre et évidemment pareil si vous aviez un set vers le bas, il augmenterait vers le haut. Vous pouvez également ouvrir le menu étendu, puis vous trouverez ici d'autres options d'alignement. Veuillez ne jamais utiliser un alignement de texte justifié. Pour être honnête, je ne sais même pas pourquoi il existe toujours. Celles que vous utiliserez probablement le plus sont soulignement et d'autres cas similaires, et vous trouverez des éléments plus avancés tels que le découpage vertical, style des paragraphes et, dans les détails, encore plus d'éléments comme certains retraits ou si vous avez des positions numériques spécifiques, retraits ou si vous avez des positions numériques spécifiques des positions numériques Mais la plupart du temps, le menu standard conviendra parfaitement. Comme pour tout autre objet, vous pouvez sélectionner du texte et l'aligner. Et pour tout changement de couleur, vous utiliserez le menu du film. Et d'ailleurs, dans Figma et dans la conception de l'interface utilisateur en général, le texte a toujours sa propre boîte. Le titre possède sa propre zone et le texte de la copie possède sa propre zone. Techniquement, vous pourriez avoir ce titre dans la même boîte, mais ce n'est pas ainsi que nous avons configuré la conception de l'interface utilisateur 13. 08 Les cadres d'identité – La superpuissance de Figma: Figma est vraiment une histoire de cadres de nidification. Au début, la raison pour laquelle tout devrait être placé sur un cadre peut ne pas sembler si évidente. C'est quelque chose que vous comprendrez beaucoup mieux une fois que vous serez passé à des fonctionnalités plus avancées, telles que l'utilisation de composants ou la mise en page. Voyons à quoi ressembleraient les cadres imbriqués. Ici, vous avez un cadre parent, et à l'intérieur de ce cadre parent, vous avez d'autres cadres. Vous avez donc un cadre orange, un cadre rouge et un cadre bleu. Vous pouvez voir que dans le panneau des couches situé sur le côté gauche, vous pouvez déplacer les cadres simplement en les faisant glisser. Maintenant, dans ces cadres, j'en ai encore d'autres. Donc, si je clique sur mon cadre bleu ou que je l'ouvre via le panneau des calques, vous pouvez voir que j'ai une forme, mais j'ai aussi un autre cadre contenant du texte. Ce serait donc quelque chose comme un bouton qui serait à nouveau un cadre imbriqué. Si vous sélectionnez un cadre et que vous le déplacez, tout ce que vous y avez placé se déplacera avec lui. Si vous faites glisser des éléments entre des cadres. Par exemple, disons cette forme, je la fais glisser dans le cadre rouge, puis vous pouvez voir qu' elle se réorganise automatiquement dans le panneau des calques Vous n'avez donc pas à vous inquiéter à ce sujet. Je peux également simplement faire glisser un élément hors du cadre parent, et cela créera automatiquement un autre cadre sur mon canevas à côté de celui-ci. Vous pouvez également dessiner un cadre. Donc, si j'appuie sur F, je peux simplement dessiner un cadre à l'intérieur d'ici, et si je le dessine au-dessus de certains éléments, il contiendra ces éléments. Mais revenons une seconde à notre configuration initiale. Si toutes vos couches sont ouvertes et que vous souhaitez les réduire, il vous suffit de sélectionner le cadre parent et d'appuyer sur l'option ou ancien L. Si vous souhaitez passer à l'élément enfant suivant, appuyez sur Entrée. Remarquez comment cela va sélectionner toutes les images du niveau suivant. Si j'appuie à nouveau sur Entrée, cela ira encore plus loin et ainsi de suite. Avec la barre oblique inversée, vous pouvez revenir au parent principal Et n'oubliez pas qu'avec le vieux et le L, vous allez réduire les anciennes couches. Si vous souhaitez sélectionner une couche en profondeur, supposons que vous souhaitiez voir ce bouton ici, vous devez d'abord cliquer sur tout le long de la couche. Ce que vous pouvez faire est simplement de maintenir la commande enfoncée, puis de sélectionner la couche ci-dessous C'est en fait le raccourci dont vous devez vraiment vous souvenir, car c'est quelque chose que vous allez utiliser tout le temps. C'est une bonne pratique si vous commencez déjà à réfléchir et à concevoir les éléments de base de votre design avec des cadres, et je vais vous montrer comment cela fonctionne. Cependant, ne vous inquiétez pas si, ici ou là, vous faites une petite erreur ou si vous ne savez pas quoi utiliser. Tu pourras toujours régler ça plus tard. 14. 09 Cadres et groupes: La prochaine question que vous vous poserez probablement est pourquoi des cadres et pas seulement des groupes dans FICMA Parce que dans FICMA, nous pouvons simplement regrouper des éléments en les sélectionnant et appuyant sur commande et G. Regardons cela de plus près Ici, j'ai un cadre, et ce cadre contient un autre cadre bleu et une ellipse. Et ici, j'ai la même configuration, mais il s'agit d'un groupe, comme vous pouvez le voir dans le panneau des couches. Maintenant, je peux les déplacer en groupe, donc c'est ce que je recherche, et je pourrais même les placer dans un autre cadre. Disons dessiner un cadre autour d'eux. Ensuite, vous pouvez voir les deux s'asseoir parfaitement à l'intérieur de ce cadre, qu'il s'agisse d'un cadre miné ou d'un groupe minsted Au début, il semble qu' il n'y ait pas beaucoup de différence, alors pourquoi ne pas opter pour celui-ci ? C'est vrai que lorsque je commence à concevoir, j'utilise parfois des groupes. Ils sont en quelque sorte plus rapides et plus faciles à gérer au début. Lorsque je rédige une brève ébauche de quelque chose, je commence souvent par des groupes. En fait, vous n'avez pas à vous inquiéter , car même si vous avez un groupe, vous pouvez toujours le convertir en cadre ultérieurement utilisant simplement le menu déroulant sur le côté droit, et vous pouvez toujours reconvertir n'importe quel cadre en groupe, si pour une raison ou une autre vous le souhaitez. Donc, au début, ne vous inquiétez pas trop sur la façon dont vous devez configurer tout cela. Cela vous viendra une fois que vous serez passé à choses plus avancées, comme la conception automatique de mises en page avec des composants, ainsi que le prototypage, où vous remarquerez que vous aurez simplement besoin d'un cadre ou que Figma va même vous donner un coup de main et convertir tout en cadres pour vous en cas Essayons quand même de prendre l' habitude de travailler avec des cadres. Pour l'instant, juste quelques différences fondamentales que vous remarquerez peut-être tout de suite. La première est que si j'ai un cadre, alors vous pouvez voir sur le côté droit, je comprends cette petite case que vous pouvez cocher, appelée contenu du clip. Maintenant, le contenu du clip est très pratique, notamment parce que nous utilisons le cadre pour représenter notre angle d' affichage ou la taille de notre appareil Par conséquent, nous allons avoir du contenu qui débordera. C'est quelque chose que nous souhaiterons peut-être animer plus tard, lors du prototypage , mais au début, nous ne voulons pas voir tout ce débordement Il est donc très pratique de pouvoir l'afficher et Je ne peux pas faire ça en groupe. Vous remarquerez également que si vous souhaitez l'utiliser comme arrière-plan, disons que nous ne faisons que redimensionner celui-ci ici, alors nous aurons exactement le même aspect Si nous l'utilisons, c'est qu'il nous manque certaines fonctionnalités. Regardez si je passe au cadre. Vous verrez que j'obtiens beaucoup plus de fonctionnalités, comme grilles de mise en page et toutes ces différentes sélections Ici, j'en reçois pas mal. Je pourrais, par exemple, ajouter une mise en page automatique, ce que nous voulons faire plus tard. Si je l'enlève, vous remarquerez que Figma a eu la gentillesse de le convertir en cadre pour moi Donc, plutôt que de vous concentrer sur la bonne approche, je vous recommande simplement de vous lancer, procurer des tracteurs, et une fois que vous aurez atteint les fonctionnalités les plus avancées, tout se mettra en place. 15. 10 Designer avec des cadres imbriqués: Configurons un premier design avec des cadres imbriqués et des figma. Voici un exemple classique. J'ai un cadre parent, appelé bloc, qui contient d'autres cadres et éléments. Vous pouvez voir ici que j' ai ma navigation, qui est également un cadre contenant un autre cadre, et à l'intérieur, j'ai quelques lignes représentant le menu des hamburgers. Au fait, je peux simplement le faire glisser vers le haut si je veux modifier l'ordre. Ensuite, j'ai mon titre, et vous pouvez voir que les titres ou simplement le texte en tant que tel ne sont pas placés dans un cadre séparé, sauf s'il s'agit d'une partie d'une carte ou d'un autre élément Un titre, que vous pouvez simplement placer librement sur le cadre de votre parent. Alors j'ai ma carte ici. Vous pouvez voir que j'ai deux cartes. Encore une fois, si je voulais modifier l'ordre, il suffit de le faire glisser dans votre panneau de couches. À l'intérieur de ma carte, vous pouvez voir que j'ai une forme, que j'ai appelée image, puis j'ai un titre et du texte Nous allons donc recréer cela et au cours du processus de construction, il deviendra beaucoup plus clair pourquoi et comment j'ai configuré les différents éléments OK. Déplaçons ça un peu. Appuyons sur F, et ajoutons un écran vide de la même taille juste à côté. En décalant deux, nous les envoyons en plein milieu. Je vais passer en revue cela assez rapidement, alors n'hésitez pas à mettre la vidéo en pause et à essayer différentes étapes à votre rythme. La première chose que je vais faire est d'appuyer sur L pour activer l'outil linéaire. Vous pouvez voir ça ici, les raccourcis. Et je vais tracer une limite pour mon menu de hamburgers. Réglons ce paramètre sur 40. Et ce que je vais faire maintenant, c'est sélectionner cette option Shift ou autre. Ensuite, je vais en faire glisser une copie vers le bas. Et vous pouvez voir que je peux maintenant voir la taille directe. Si vous ne l'avez pas, vous pouvez également le sélectionner et simplement utiliser l'outil de rangement Maintenant, sélectionnons-les tous et je vais les agrandir un peu pour que nous puissions mieux les voir, soit deux pixels. Maintenant, la prochaine chose que vous pouvez faire est de le transformer en groupe, afin que la commande et G créent un groupe. Sur le côté gauche, vous pouvez voir un groupe et vous pouvez appeler ce burger. Et pour être honnête, pour le moment, cela fonctionnerait très bien. Si vous souhaitez ultérieurement le transformer en cadre, vous pouvez simplement sélectionner votre groupe, et dans le panneau des propriétés de droite, vous pouvez simplement passer d'un cadre à un groupe. Notez que le groupe, si je voulais un peu d'espace supplémentaire, ne me permet pas de le faire. Donc, ce que je vais faire, c'est en faire un cadre pour le moment, et vous pouvez voir que cela me montrerait tout si je le découpais, mais ça va couper certaines choses. Mais nous pouvons alors simplement appuyer sur la commande, et vous pouvez maintenant redimensionner ce cadre à votre guise. Terminons maintenant la navigation avec f, appuyez simplement sur F. Et au lieu de choisir un cadre, je vais dessiner un cadre, et je vais le dessiner autour du hamburger que je viens de préparer. Vous pouvez voir que si je le dessine autour d'un élément, cet élément se trouvera automatiquement à l'intérieur du cadre, donc il se déplacera avec ce cadre. Donnons un peu de teinte à l'arrière-plan pour mieux le voir. J'utilise juste mon matériau de remplissage et choisis une couleur légèrement plus foncée. Assurons-nous également d'en avoir un à remplir. Si vous n'avez pas de remplissage, appuyez simplement sur le bouton plus, et le blanc sera affiché par défaut. Vous pouvez toujours sélectionner votre hamburger ici. Si vous appuyez sur la commande, vous pouvez même effectuer une sélection approfondie, comme nos traits. Mais le moyen le plus simple est d'appuyer sur Entrée, qui sélectionne tous les éléments enfants Vous pouvez ensuite utiliser l'outil d'alignement pour centrer au milieu de navigation que vous venez de créer. Ensuite, il y a quelques textes. Appuyons sur t, et je peux simplement dessiner une zone de texte où je veux l'ajouter Je peux ajouter du texte ici, et je vais simplement copier le texte que j'ai déjà écrit, et je vais le placer à l'intérieur d'ici. Vous pouvez maintenant voir que cela a automatiquement pris le style de ce texte. Si tu voulais changer ça, tu pourrais le faire ici. Prenez l'habitude de toujours ajouter de la hauteur automatique à votre texte. Cela signifie simplement que si je supprime des textes ou si j'ajoute du texte, la zone de texte répondra automatiquement Ajoutons le cadre de notre carte. J'appuie simplement sur F, et au lieu d'utiliser le menu prédéfini, je vais dessiner cette carte sur mon canevas. Je vais ajouter la base d'un effet, pour donner une ombre à l'arrière-plan. Remarquez si vous ne voyez rien qui indique que votre cadre est bien rempli, s'il ne suffit pas de cliquer sur le signe plus, et cela lui donnera un remplissage par défaut Vous pouvez également modifier l'effet en cliquant sur le menu des effets. Je vais ajouter cette zone pour l'image à mon cadre, donc je vais appuyer sur r, et je vais dessiner un rectangle. Si je le dessine sur mon cadre, vous pouvez voir que dans le menu du cadre, il est automatiquement ajouté au cadre. Si je double-clique, je peux le changer en image. De nombreuses personnes se demandent si un espace réservé pour une image doit être un cadre ou une forme Ne vous inquiétez pas trop à ce sujet. Il n'y a pas de bien ou de mal. Les deux approches fonctionneront. Vous me verrez généralement utiliser des formes un peu plus que des cadres dans la plupart des cas, car je trouve qu'il est plus facile d'y ajouter des images. Mais dans certains cas, un cadre peut avoir du sens. Parfois, j'utilise même un cadre avec une forme à l'intérieur si je travaille avec des effets d'animation et de zoom avancés. À ce stade, ne vous inquiétez pas trop à ce sujet. Utilisez ce qui vous convient le mieux. Maintenant, ajoutons notre titre, donc j'appuie sur T, pour obtenir mon outil de texte et écrire le titre Pour mon texte de copie ici, je vais juste être paresseux et copier à partir de mon exemple. Maintenant, remarquez que cela est déjà réglé à la hauteur automatique, et je vais en rester là. Vous pouvez l'ajuster comme vous le souhaitez pour configurer cette carte. Je vais également avoir ce titre à hauteur automatique. En général, j'utiliserais la largeur automatique pour quelque chose comme les boutons où je sais que cela ne se répercutera pas sur une deuxième ligne. Et je vais les réorganiser un peu. Fantastique Maintenant, une chose que je tiens à souligner, c'est de remarquer que nous avons ici du contenu de clips. Contenu du clip, dessinons simplement une autre forme ici. Si j'avais, disons, un cercle, vous verrez qu'il n'affichera pas le cercle complet. Si vous sélectionnez le cadre parent, vous pouvez voir tout ce qui se trouve en dehors de votre carte. Parfois, si vous ne voyez aucun élément, en particulier si vous travaillez plan d' un élément, assurez-vous que le contenu de votre clip est défini. Pour faire une copie de votre carte, sélectionnez simplement une carte, appuyez sur la touche Alt ou Option, puis maintenez la touche Maj enfoncée tout en maintenant la touche Maj enfoncée. Ensuite, il le copiera juste dans la ligne ci-dessous, et il ne se déplacera pas vers la gauche et la droite. Voilà. Votre première mise en page est terminée. 16. 11 Réseaux utilisables avec des styles: Créons des grilles réutilisables. Voici ma page de blocage, et j'ai une autre page détaillée si je clique sur cet article. Maintenant, je veux ajouter la même grille aux deux pour assurer qu'ils suivent la même disposition générale. Pour ajouter une grille, il suffit de sélectionner un cadre. Et notez que cela fonctionne sur n'importe quel cadre Dans ce cas, je vais sélectionner mon cadre parent ici, représentant la fenêtre d'affichage, et sur le côté droit, je vais cliquer sur la grille de mise en page Mais par défaut, vous allez obtenir cette grille de pixels, mais ce n'est pas ce que nous voulons. Nous voulons des colonnes. Cliquez sur l'icône, puis dans le menu déroulant, sélectionnez les colonnes Vous pouvez modifier le nombre, donc je pourrais le changer à quatre, et je peux également définir une marge. Essayons donc quelque chose comme 24. Notez que je travaille toujours avec des multiples de quatre ou huit. Et Dn pour la gouttière, je vais aussi opter pour un multiple de huit ou 24 En fait, augmentons légèrement ce chiffre à 32. Maintenant, il existe différents types de grilles. L'étirement est probablement le plus courant. Cela signifie que si je modifie la largeur, elle s'étirera, de sorte que la colonne s'étirera, tandis la gouttière et la marge resteront les mêmes N'oubliez pas que vous pouvez toujours revenir à la taille d'origine via le menu. Maintenant, si je choisis le centre, cela signifie que la grille restera au centre. Et j'aurais besoin de déterminer la largeur dont j'aurais besoin ici. Vous devez donc faire un peu de calcul pour savoir ce que vous recherchez. Pour notre design, restons-en à l'étirement. Je pourrais maintenant appliquer la même grille à mon autre cadre simplement en recommençant ce processus, mais il est beaucoup plus facile et préférable de enregistrer en tant que style. Je vais sélectionner le cadre sur lequel se trouve ma grille. Ensuite, là où je vois la grille que je viens de créer, cliquez sur l'icône Styles. Vous pouvez maintenant cliquer sur le bouton Plus et le sauvegarder. Je vais l'appeler réseau mobile. Vous pouvez ajouter une description supplémentaire ici, puis créer le style. Si vous cliquez sur le canevas gris, vous verrez ce style de grille enregistré dans votre aperçu. Si vous écrivez, cliquez, vous pouvez également le modifier ou le supprimer. Maintenant, si nous voulons l'appliquer à un autre cadre, il suffit de sélectionner ce cadre. Ensuite, dans le menu de la grille, si vous passez la souris dessus, vous verrez l'icône des styles Vous pouvez maintenant sélectionner cette grille Je peux maintenant commencer à aligner, par exemple, mes zones de texte sur la grille. Notez qu'avec des éléments comme ces cartes ici, ce sera également une mise en page plus tard. Tout cela va donc fonctionner de manière un peu plus automatisée. Mais pour l'instant, faisons-le à la main. Je peux déplacer le petit bouton de retour ici, en l'alignant sur la grille Avec mon image, je pourrais choisir si je veux que cette image soit redirigée vers le bord ou si je veux qu'elle figure dans la grille. Si vous positionnez des images sur la grille, veillez toujours à utiliser les colonnes du fichier Ne faites rien de tel que de les positionner au milieu d'une colonne ou quelque chose comme ça. Donc pour l'instant, je vais utiliser toute la largeur, puis je vais faire de même avec mes zones de texte Assurons-nous simplement qu' ils s'intègrent bien dans la grille. Vous pouvez masquer ou afficher la grille en utilisant le menu de droite. Si vous le survolez, vous verrez l'icône si, ou vous pouvez utiliser le raccourci et G. 17. 12 Communauté et plugins Figma: Plugins et la communauté Figma. Si vous rentrez chez vous, alors à la maison, vous trouverez ce petit globe ici, actuellement des publicités en haut et en bas en bas. Mais veuillez noter que cela change beaucoup, vous pourriez donc le retrouver ailleurs à l'avenir. Si vous cliquez dessus, vous allez accéder à la communauté Figma Et vous voyez ici toutes sortes de fichiers. Il peut s'agir de présentations, de fichiers de conception que vous pouvez utiliser. Certains d'entre eux sont gratuits et d'autres peuvent être payants, mais la plupart d'entre eux sont gratuits. Par exemple, supposons que nous recherchions un ensemble d'icônes, alors nous pouvons simplement le rechercher. Et puis vous voyez ici différents concerts. Si vous aimez certains d'entre eux, vous pouvez aller sur la page, vous pouvez les parcourir un peu, afin d'avoir un petit aperçu de ce qui se passe ici, puis vous pouvez simplement cliquer sur Ouvrir dans Figma pour créer une copie de ce fichier dans votre compte FIMA Vous pouvez également rechercher des créateurs. Vous pouvez donc, par exemple, rechercher ma page sur la communauté, alors tapez simplement Kristine Valor Ensuite, si vous passez aux créateurs ici, vous arriverez à ma page. Vous pouvez également utiliser le lien direct, qui est la barre oblique de figma.com, puis simplement utiliser le handle, qui dans mon cas se trouve sur Ici, vous pouvez trouver toutes mes ressources gratuitement les dupliquer et jouer avec elles sur votre propre compte Figma Une autre chose que nous avons ici, ce sont les plug-ins. Vous pouvez les rechercher ou en haut, vous avez également un onglet Plug-in, qui vous montre quelques plugins populaires , leur accessibilité, etc. Jetons un coup d'œil à ce que cela nous apporte pour l'organisation des fichiers. Ensuite, vous obtenez une liste de plugins. Vous pouvez voir combien de personnes l' utilisent actuellement, puis vous pouvez simplement l' ouvrir dans votre fichier. Vous pouvez également ouvrir les plug-ins directement dans votre fichier de conception. Accédez à votre menu d'actions, et vous pouvez simplement les rechercher ici dans la recherche normale ou accéder aux plugins et aux widgets, puis vous pouvez également rechercher sujet qui vous intéresse. Je veux vous montrer un très bon plugin appelé HTML to Design. Une fois que vous voyez le plug-in, double-cliquez dessus et il s'ouvre. Ce que nous pouvons faire avec HTML to Design, nous pouvons simplement ajouter une URL à n'importe quel site Web, puis à partir d'une URL, créer ce site Web dans Figma Vous pouvez donc voir ici la page qu'il a importée et vous pouvez tout voir comme modifiable Je peux donc, par exemple, extraire cette navigation ici, puis je peux simplement travailler avec elle et je peux entrer ici, je peux modifier tous les textes et tout le reste. C'est donc vraiment génial pour démarrer avec n'importe quel site Web avec lequel vous souhaitez jouer. 18. 13 Ajouter des images à vos designs: Ajoutez des images à vos designs. Il existe différentes manières d' ajouter des images à vos designs. Vous pouvez soit utiliser un menu de films et les importer, les importer en masse, copier des images existantes depuis votre plan de travail. Vous pouvez les créer avec l'IA ou utiliser un plugin tel que Unsplash La première option consiste donc simplement à ajouter une image via le menu des fichiers. Sélectionnez donc votre cadre ou votre forme, puis passez au remplissage, puis passez à l'image. Vous pouvez désormais choisir une image, et vous pouvez simplement sélectionner cette image dans votre fichier. Cependant, c'est un peu lent. Nous pouvons donc également sélectionner ces images en bloc, appuyer sur la commande Shift ou sur Windows Control, puis sur K, et vous pouvez désormais sélectionner plusieurs images à la fois. Sur votre curseur, vous verrez un aperçu de l'image suivante à placer et le nombre d' images que vous avez stockées. Vous pouvez l'ajouter directement sur le canevas ou cliquer sur n'importe quelle forme pour placer l'image. Il se peut également que vous ayez déjà des images dans votre fichier de conception que vous souhaitez réutiliser. Désormais, vous n'avez plus besoin de les exporter ni de les importer. Vous pouvez les utiliser directement d'ici. Sélectionnez simplement l'image, appuyez sur la commande Shift et sur C, et elle copiera un fichier PNG Vous pouvez simplement la coller en appuyant sur la touche Commande ou Ctrl et en la plaçant dans n'importe quelle autre forme. Une autre option est que nous pouvons également générer des images avec A. Vous pouvez soit simplement cliquer sur le menu Actions, puis vous trouvez créer une image, soit sélectionner un cadre ou une forme et, via le menu des remplissages, choisir le remplissage d'image, échanger une image, puis vous pouvez également générer des images ici. Il ne vous reste plus qu'à saisir ce que vous recherchez. Si vous aimez plus d' une image, petit conseil, faites-la simplement glisser sur votre bureau et vous pourrez ensuite la stocker, puis plus tard, vous pourrez toujours l'utiliser sur n'importe quel autre élément. La dernière option, et en fait, ma préférée est d' utiliser un plug in. Ouvrez le menu Actions, cliquez sur Plug-ins, puis tapez Unsplash Double-cliquez dessus pour l'ouvrir, et vous pouvez soit taper ce que vous recherchez, soit utiliser certaines des catégories prédéfinies. La plupart de ces images sont en haute résolution et libres Vous pouvez simplement cliquer dessus pour remplir n'importe quelle image ou cadre dans votre design. Ajoutons donc une image à notre design. Lumi est un autre plugin qui fonctionne comme Unsplash et que j' aime aussi beaucoup Accédez simplement à vos plugins et vous pouvez choisir Lumi ou le plug-in Unsplash, puis l' ouvrir et sélectionner n'importe quelle forme Ensuite, vous pouvez rechercher les images que vous aimez ici. Passons à celui-ci, et vous pourrez ensuite le placer directement à l'intérieur de votre forme. Maintenant, si nous voulons utiliser la même image ici, alors ce que nous pouvons faire, c'est soit utiliser la même image. Disons que vous fermez la prise et que vous ne savez pas où vous l'avez trouvée. Ensuite, vous pouvez utiliser votre raccourci, commande Shift et C pour copier un fichier PNG, puis sélectionner l'autre forme ou cadre, et vous pouvez maintenant simplement le coller ici. Si vous souhaitez modifier la sélection de l'image, double-cliquez et vous obtiendrez le menu des images. Ici, dans le menu déroulant, qui est configuré pour être rempli, choisissez Recadrer. Vous pouvez maintenant déplacer l'image. Vous pouvez également, si vous vous rapprochez des bords, modifier la taille. Si vous maintenez la touche Maj enfoncée, elle évoluera proportionnellement 19. 15 méthodes de duplication: Dans Figma, il faut beaucoup copier-coller. C'est donc une bonne idée de comprendre les différentes manières de dupliquer. Vous pouvez coller dans la même position, coller plusieurs fois, coller ici, coller pour remplacer ou dupliquer. Commençons par coller dans la même position. Ainsi, nous copions simplement un élément, placé sur un cadre dans une certaine position, puis nous sélectionnons un nouveau cadre et le collons à cet endroit. Sélectionnons donc notre en-tête, appuyons sur Commande ou Contrôle et copions, sélectionnons un nouveau cadre. Et si nous le collons simplement maintenant avec les commandes Control et V, il sera collé exactement au même endroit. Nous pourrions également le faire avec plusieurs éléments, afin d'en choisir plusieurs, sélectionner un cadre, et le coller exactement au même endroit, c'est très pratique. Et ce qui est génial, c'est que cela fonctionne également pour le multicollage. Nous pouvons donc faire exactement la même chose et simplement sélectionner plusieurs cadres. Supposons que nous voulions que notre en-tête et notre bouton ci-dessous soient placés dans la même position sur chaque cadre, que nous les copions simplement, que nous sélectionnions tous les cadres, nous les collions, et ils seront exactement au même endroit. Si nous voulons un emplacement différent, nous pouvons également utiliser le collage ici. Nous le copions donc également, puis nous cliquons avec le bouton droit de la souris et sélectionnons Coller ici dans notre menu. Sélectionnons donc à nouveau notre cercle. Je l'ai copié, et maintenant je vais sélectionner l'endroit où je veux le placer, et je vais cliquer avec le bouton droit sur le coller ici, et il sera placé directement dans cette position. Une autre solution très pratique que j'ai beaucoup utilisée est la colle à remplacer. Encore une fois, il vous suffit de copier l' élément comme avant, puis d'appuyer sur la commande Shift et R, ou vous pouvez également utiliser le clic droit et le coller pour remplacer un objet existant. Je vais donc sélectionner le carré ici. Je vais appuyer sur Commande ou Ctrl et sur C pour le copier. Je peux maintenant sélectionner n'importe quel autre élément et appuyer simplement sur Shift, Command ou Control, et R, et il sera remplacé. Vous pouvez également sélectionner plusieurs éléments et les remplacer tous en même temps. Le dernier que je veux vous montrer est un double, vous allez me voir l'utiliser tout le temps. Pour dupliquer, il suffit de sélectionner un élément, appuyer sur Alt, puis de faire glisser une copie. Si vous maintenez la touche Shift enfoncée en plus, vous allez le copier sur la même ligne. Une fois que vous avez fait une copie, vous pouvez simplement appuyer sur Commande et D pour créer plusieurs copies à la même distance. Essayons ça. Je peux donc sélectionner ce cadre, appuyer sur t, et je peux maintenant en extraire une copie identique, mais vous pouvez voir que cela se déplace librement. Si je fais de même, mais que je maintiens également la touche Shift enfoncée, je vais copier exactement sur la même ligne. Et une fois que j'ai créé un doublon, je peux maintenant appuyer sur Commande ou Ctrl et sur D, et il va créer d'autres copies exactement à la même distance. Si nous les sélectionnons tous, appuyons sur Shift et deux pour qu'ils soient tous positionnés au centre. Vous pouvez voir sur le côté droit et dans le panneau des propriétés que je peux ajuster les écarts entre eux. En effet, ils sont tous à la même distance, ils sont rangés, vous pouvez donc les ajuster et vous pouvez également les inverser à l'aide des petites bulles 20. 16 Dessiner dans Figma: Vous pouvez également utiliser le FIMA pour l' illustration et le dessin. FIMA est un programme vectoriel. Si vous avez déjà travaillé avec quelque chose comme Illustrator, cela vous sera très familier. Il est important de noter que le FICMA est principalement conçu pour la configuration de l' interface utilisateur Ce n'est pas vraiment une question d'illustration, mais vous pouvez obtenir de très bons résultats si vous souhaitez configurer des éléments tels que des icônes, par exemple. Vous pouvez simplement utiliser vos formes ici pour illustrer. Si je dessine une forme et que je double-clique sur cette forme, remarque que j' obtiens un menu différent et que vous pouvez cliquer dessus, et par conséquent, vous allez deviner ces nouveaux outils. Vous allez obtenir ces courbes et d'autres choses de ce genre. Maintenant, vous souhaitez probablement créer votre propre illustration et il serait donc plus judicieux d' opter pour votre crayon ou votre stylo. Si vous avez de l'expérience en illustration et que vous avez des outils tels qu'un trackpad et des stylos à la maison, vous devriez peut-être opter pour le crayon. Il peut dessiner librement. Toutefois, si vous travaillez avec une souris dans une configuration plus standard, vous voudrez probablement opter pour l'outil Pent. L'outil Pent est quelque chose auquel vous serez vraiment habitué si vous avez déjà travaillé avec un logiciel d' illustration. Ajoutez simplement un premier point sur notre toile, puis vous obtenez une ligne. Si vous maintenez la touche Shift enfoncée, vous obtenez une ligne droite. Faisons-le ici. Ainsi, vous pouvez ensuite dessiner n'importe quelle icône ou tout élément d'illustration dont vous aurez besoin. Maintenant, si vous quittez ce menu, vous pouvez toujours obtenir ces points en double-cliquant dessus et vous pouvez les ajuster. Vous pouvez également obtenir les courbes de Bézier. Double-cliquez pour revenir à notre illustration. Si vous cliquez ici, vous pourrez alors obtenir les courbes et les manipuler davantage. 21. 17 Mise à l'échelle dans Figma: Mise à l'échelle dans Figma. L'outil de mise à l'échelle de Figma est un peu négligé mais s'avère parfois très pratique J'ai ici une illustration vectorielle, et vous pouvez voir qu'elle est composée de différentes formes, et que ces formes ont un trait qui a un poids différent. Parfois, c'est 28 ans et ainsi de suite. Maintenant, si je veux l'agrandir, je pourrais aller jusqu'au bord jusqu'à ce que je pourrais aller jusqu'au bord jusqu'à ce vous voyiez le petit rocher a ici , puis tout descendre vers le bas pour conserver les proportions. Maintenant, je peux changer la taille. Cependant, avec les traits, cela ne fonctionne tout simplement pas correctement et ne me donne pas les bonnes proportions. Une bien meilleure façon de le faire serait d' utiliser un outil de mise à l'échelle. Vous trouverez l'outil de mise à l'échelle dans la barre d'outils juste à côté de l'outil de déplacement. Assurez-vous donc de supprimer le sous-menu, puis de voir l'échelle, ou vous pouvez également utiliser un raccourci k. Vous remarquerez que l'erreur semble un peu différente, puis sur le côté droit vous pouvez voir le menu d'échelle. Ainsi, dans le menu de l'échelle, vous pouvez soit ajouter un montant, deux fois la taille actuelle, par exemple, si vous appuyez à nouveau sur K, vous y revenez. Vous pouvez également ajouter une hauteur et une largeur spécifiques que vous souhaitez redimensionner Vous pouvez également choisir le sens de l'échelle. Par exemple, nous pourrions le faire croître en bas à gauche. Vous pouvez également effectuer une mise à l'échelle sur le Cvas tant que vous êtes à l'intérieur de l'outil de mise à l'échelle Il suffit donc de sélectionner n'importe quel élément, puis vous verrez une nouvelle erreur sur le bord, et comme vous êtes dans l'outil de mise à l'échelle, celui-ci va maintenant le redimensionner correctement. Parfois, vous vous retrouvez coincé dans l'outil de balance. Donc, si vous ne trouvez pas tous vos autres paramètres, c'est parce que l'outil de mise à l'échelle est toujours ouvert. Assurez-vous simplement de le fermer ici avec le x. 22. Partie 1: Permettez-moi de vous parler un peu de notre projet de cours. Dans le cadre du projet de cours qui couvre l'ensemble du cours, nous travaillerons sur la conception d'une application de podcast, ainsi que sur un prototype fonctionnel pour celle-ci À la fin de chaque chapitre de votre fichier de travail Figma, vous trouverez une invite et un lien pour accéder au projet de cours Le projet de cours s' ajoute au cours général. Cela signifie que c'est absolument facultatif. Vous ne perdrez aucune information si vous vous contentez de suivre les cours généraux. Mais laissez-moi vous en dire un peu plus avant de vous décider. Lorsque vous ouvrez le fichier du projet de cours sur le côté gauche, vous verrez des pages. Sur la première page, nous avons nos exercices. Vous pouvez voir que pour chaque section du cours, nous avons un exercice. Ces exercices s'appuient les uns sur les autres et sont accompagnés d'instructions. Assurez-vous d'abord de suivre les leçons générales, par exemple les bases de Figma ou des composants Et une fois que vous vous sentez prêt, retournez dans le fichier du projet de cours et passez aux étapes suivantes. Ne vous précipitez pas, car cela ne fera que vous embrouiller. Chacune des étapes est accompagnée d'une solution suggérée. Notez qu'il n'existe pas de solution finale dans la conception. Ce n'est en fait qu'une suggestion. Vous pourriez trouver quelque chose de complètement différent qui soit tout aussi bon. Mais n'hésitez pas non plus à simplement prendre ma solution et à continuer. S'il vous arrive de rester coincé sur le côté gauche des pages, vous trouverez le design final. C'est vraiment la version polie et finie. Vous trouverez également une page pour les composants et les guides. Ne vous inquiétez pas, vous allez découvrir tout cela pendant le cours. Revenons maintenant aux exercices et un coup d'œil à notre première partie, qui porte sur les bases de Figma J'essaie de maintenir ces fichiers à jour. Le vôtre semble peut-être légèrement différent. Toutes les informations importantes y trouveront. Pas de soucis. 23. Partie 1: Dans cette première partie, nous sommes invités à créer un wireframe. Et vous pouvez voir qu'il y a une photo de ce à quoi cela devrait ressembler et vous obtenez des instructions. Vous pouvez également le construire à votre rythme. Sur le côté droit, vous trouverez la solution que je suggère. Il s'agit vraiment d'un cadre métallique lequel vous pouvez cliquer voir exactement dans le panneau des couches comment je l'ai configuré. Vous n'êtes pas obligé de le construire exactement comme ça, mais si jamais vous êtes bloqué, jetez simplement un œil ou des choses comme ça. Barre de progression ici, cela peut être un peu difficile au départ. Copiez-le simplement. C'est absolument bon. L'idée de ces exercices est vraiment vous lancer et de vous débrouiller. Mais pour commencer, laisse-moi te guider un peu. Je vais copier le premier ici. Et je vais l'apporter et le placer à côté de mes cadres métalliques sur lesquels je vais travailler. Allons-y, je vais juste le placer juste à côté. Mettons-les ici de côté. Mettons ça ici. Cela peut sembler assez compliqué et un peu accablant, mais il ne s'agit en fait que de formes et de texte. C'est tout ce que nous avons fait lors de notre session de base. Je vais commencer comme ça. Je vais appuyer sur R et je vais dessiner cette forme de fond. Maintenez la touche Maj enfoncée pour obtenir une forme uniforme. Voici ma photo de fond, au fond. Et je vais refaire la même chose. J'appuie à nouveau sur R, je vais créer une forme plus petite ici. Je ne veux pas qu'ils soient de la même couleur. Vous pouvez simplement cliquer sur n'importe quel gris à partir d'ici. Vous avez peut-être quelque chose de sauvegardé ici. Peu importe les couleurs que vous utilisez. Vous pouvez également utiliser le sélecteur de couleurs. Vous pouvez donc également utiliser la couleur que j' utilise dans mon exemple. Mais ce n'est vraiment pas pertinent pour Wire Frame. Je vais maintenant ajouter le texte. Je choisis donc mon outil de texte dans la barre d'outils et je vais simplement cliquer à l'endroit où je veux le placer et commencer à taper le nom du podcast. Je vais le dupliquer à nouveau. Nous avons fait tout cela dans les leçons. Si vous ne savez pas comment dupliquer , revenez aux leçons. C'est l'option Shift and Alter. Et de cette façon, je peux dupliquer juste en dessous dans la même rangée. Je vais le placer ici et je vais l'appeler par artiste. Je peux maintenant le sélectionner. Ensuite, dans la taille droite dans le panneau des propriétés du texte, je pourrais, par exemple, le changer en moyen et également modifier la taille du texte. Par exemple, 216. Si je sélectionne le texte, je peux également changer le fond en noir. Ce bouton ici ou cette étiquette. Vous pouvez voir qu'il s'agit simplement d'un cadre avec un texte à l'intérieur. Je vais appuyer et je vais dessiner un cadre imbriqué. Cliquez sur le bouton plus à côté de Phil, s'il n'y a pas de pilule. Je vais maintenant arrondir les angles. Je vais simplement copier le texte d'un pair. Cliquez sur le cadre, collez-le en taille et modifiez-le. Il suffit de le faire glisser et de le positionner. Et vous pouvez voir dans le panneau Calques que si vous sélectionnez le cadre, tout ce que vous faites glisser dessus est automatiquement redimensionné si vous voulez une petite ombre pour le bouton. Vous pouvez simplement cliquer sur le signe plus à côté de Effets dans la partie droite du panneau Propriétés. Et ça va ajouter ça. Maintenant, dans mon exemple, vous pouvez voir que tout cela est sur un seul cadre. Tout cela est regroupé. Je vais faire de même pour mon nouvel exemple ici. Je vais sélectionner tous ces éléments. Maintenant, je vais appuyer sur Commande et G. Cela les regroupera en fait pour les cadres filaires. C'est tout à fait ou juste. Je peux désormais appeler ce groupe un héros. Mais vous devriez peut-être déjà commencer à penser par cadres, car nous savons c'est le superpouvoir d'Igm Que pouvez-vous faire pour le convertir rapidement en cadre ? Passez au panneau des propriétés situé sur le côté droit et, au lieu de grouper, utilisez simplement un cadre. Vous pouvez également sélectionner des éléments et cliquer avec le bouton droit de la souris. Ensuite, vous pouvez voir ici la sélection d'images et un raccourci pour vous permettre de le faire en une seule fois ou simplement de dessiner une autre image autour de celle-ci, mieux est de mettre la vidéo en pause puis de l'essayer vous-même. Maintenant, je veux que ce titre soit joué récemment, et nous pouvons voir que c'est 24 et moyen Donc, ce que je vais faire, c'est copier celui-ci ici. Oh, et d'ailleurs, je n'ai pas allumé mes grilles. Faisons-le. Sélectionnons cette paire et ce cadre. Et puis, sur le côté droit, je peux voir qu' aucune grille ne s'applique, mais j'ai déjà créé un style de grille pour vous. Cliquez sur les petits points pour les styles et ajoutez simplement la grille mobile. Maintenant tu peux le voir. Je peux également aligner mes images. Maintenant, faisons vieillir ça. Et c'est là que vous obtenez la bonne distance pouvoir la mesurer. Je vais placer ce titre ici et je vais l' appeler récemment plate Je vais le sélectionner et changer en moyen. Je veux créer ces petites cartes ici. Pour cette carte, je vais simplement copier celle que j'ai déjà. On dirait qu'ils ont à peu près la même taille. Je vais faire glisser ce nom vers le bas car il semble que ce soit 16. C'est combien aussi ? 16. OK, super. Je vais donc simplement le changer en nom de podcast maintenant. Je vais déjà les sélectionner tous les deux. Cette fois, je vais cliquer avec le bouton droit de la souris et je vais dire sélection de cadres. Il en va de même si vous le regroupez puis que vous le modifiez via le menu déroulant ici, ou si vous pouvez simplement dessiner un cadre autour de celui-ci. Peu importe. Ce que vous allez obtenir, c'est ce cadre. Et à l'intérieur de ce cadre, tu as ton image. Vous pouvez bien sûr les renommer et vous aurez le nom du podcast Appelons celle-ci carte ici. Maintenant, nous voulons simplement le dupliquer. Tirons-en quelques copies. Et je garde toujours le bon vieux papier pour voir les distances. Et je vais sélectionner l'ensemble de ce groupe ici. Laisse-moi voir. En fait, oui, ce sont des célibataires dans celui-ci. Et je vais juste copier tout ce groupe et le placer ici. Et je vais également copier mon titre. Et je vais appeler ça, vous aimerez peut-être que vous mettiez nouveau la vidéo en pause ici et que vous essayiez par vous-même Comme je l'ai déjà dit, vous n'aurez peut-être même pas besoin de la vidéo. Il est peut-être plus facile pour vous de simplement avoir cette référence et de construire à partir de là. OK, la dernière chose dont nous avons besoin maintenant c'est cette barre en bas, la barre tactile. Je vais appuyer sur F, et je vais dessiner un cadre pour cela. Donnons-lui une couleur de fond. Cliquons sur Plus. Et en fait, je vais juste choisir la couleur à partir de mon exemple ici. Maintenant, ce que je pourrais faire, c'est simplement ajouter ces éléments. Mais comme vous pouvez le voir dans la barre d'onglets ici, je les ai déjà classés en sous-catégories, ce qui facilitera les choses plus tard lorsque nous voudrons ajouter de la réactivité Vous n'avez pas besoin de le faire comme ça, mais je vais vous montrer comment déjà le configurer dans ces trois sections. Le plus simple est de simplement copier votre barre d'onglets , puis de vous souvenir de nos champs ici, ils peuvent effectuer des calculs. Ce que je vais faire, c'est additionner divisé par trois. De cette façon, j'obtiens le montant exact pour l'une de mes icônes que je souhaite placer plus tard ici. Maintenant, je vais simplement recevoir des textos. Ce texte est en fait beaucoup plus petit. Il n'y en a que 12. Je vais le remplacer par 12. Je vais le placer à l'intérieur d'ici. Ensuite, je vais simplement appuyer et dessiner un cercle. s'agit donc simplement d'un espace réservé pour une icône qui sera là plus tard Rapprochons-nous un peu plus. Nous pouvons utiliser notre outil d'alignement. Oups, en fait ce n'est pas celui que je voulais, mais bon, plaçons-le Donnez-lui un peu plus d'espace. Maintenant, appelons ce lien, ou cette icône, ou quel que soit le nom que vous voulez. Replaçons-le maintenant à l'intérieur. Je peux maintenant simplement le dupliquer de cette façon. Je reçois trois de ces liens qui ont exactement la bonne taille. Je vais appeler celui-ci chez moi. Remarquez que c'est comme sur la gauche. Ce que je veux faire, c'est revenir en arrière. Je vais le placer au centre. Modifions l'alignement du texte au centre. Et je vais appeler ça chez moi. En fait, je vais lui donner tout l'espace dont je dispose, car j'aurai peut-être un autre libellé plus tard afin de m'assurer qu'il y a suffisamment d'espace. Alors appelons celui-ci. Disons que celui-ci est sauvé. C'est ça. Nous avons configuré pour la première fois notre premier écran. Passons au second. Eh bien, double-cliquons sur celui-ci et appelons-le à la page d'accueil. Passons maintenant à notre deuxième. Il suffit de le copier et de le coller ici. Ce que je vais faire ici, comme ça, est à peu près pareil. Je vais le copier. Je vais juste me débarrasser de ces éléments. Je n'en ai pas besoin. J'ai ce petit bouton de retour. Je vais juste recopier un texte. Laissez-moi dire que c'est vrai, où est-ce à l'époque ? J'ai également le nom de la playlist et le nom du podcast ici. Je vais juste ajouter à nouveau ma grille de mise en page, et je vais simplement la copier, placer au milieu. Et je vais juste le faire glisser vers les bords. Si j'ai un nom plus long, je vais m'assurer qu' il y a suffisamment d'espace. Je vais le sélectionner et centrer le texte. Ensuite, j'ai une copie de texte. Je vais être paresseux et je vais juste le prendre et le placer ici parce que je sais qu' il s'agit simplement de copier du texte. Ensuite, je dois en lire davantage. Permettez-moi donc d'en savoir plus. Je le sélectionne, puis si vous voulez qu'il soit souligné, je le place en trois petits points dans vos paramètres de saisie, et vous trouverez ici le texte souligné. Si vous double-cliquez, vous passerez simplement des quatre largeurs à la largeur si vous le souhaitez, car cela ressemble un peu à un bouton en fait. OK, super. Il ne me reste plus qu'à ajouter les épisodes. Je vais juste copier un carré de ceux que j' ai déjà ici. Je vais le réduire un peu. Comme vous le voyez, il n'est pas nécessaire qu'il se trouve dans la grille car c'est comme un élément à part entière. Alors je vais copier celui-ci. Je vais le replacer sur la gauche. Voyons voir quelle est la taille de celui-ci. C'est très petit, il y en a dix. Vous pouvez taper toutes les majuscules ou quoi. Vous pouvez également, encore une fois , accéder à ces paramètres supplémentaires et les modifier en majuscules. Ensuite, je vais copier celui-ci ici et le placer ici. Maintenant, je vais faire de même pour celui-ci. Permettez-moi de modifier les paramètres du texte pour qu'il soit entièrement sur la gauche. Et je vais le placer ci-dessous. En fait, faisons également une belle distance de huit. Je vais le copier à nouveau. Vous pouvez voir ici que j'ai laissé un peu plus d'espace parce que quelque chose est peut-être plus long. Ce que j'ai fait ici, c'est que je peux voir que c'est automatique, c'est une hauteur de ligne de 24. Si vous cliquez dessus, vous pouvez le voir. Je vais donner une taille. Laisse-moi juste ouvrir ça. Je vais donner à ces deux lignes une valeur proche de 48. Si c'est un peu trop avancé, ne vous inquiétez pas. Il suffit de le faire glisser pour l'ouvrir afin qu'il réponde à vos besoins. Maintenant, c'est en bas. Ce n'est pas ce que je veux. Je vais changer de direction ici pour le mettre en haut. Maintenant, je peux l'aligner un peu mieux. En fait, regardons ce qu'ils ont ici. Ils ont une voiture et 48, probablement juste besoin de s'en débarrasser. OK, maintenant j'ai juste besoin de ce petit bouton de jeu ici. Il s'agit d'un rectangle. Passons à nos formes. Dans nos formes, nous choisissons un polygone. Dessinons-en un. Et c'est tout. Maintenant, cela va évidemment de pair, donc je vais sélectionner tout cela. En fait, je les regroupe cette fois parce que je veux, comme vous pouvez le voir ici, qu'ils soient répartis sur toute la largeur. Je vais vraiment appuyer dessus et je vais dessiner un cadre autour de celui-ci. Maintenant, c'est un épisode sur cadre, ce qu'on appelle un épisode, appelons-le également épisode. Génial. Maintenant, nous pouvons simplement le dupliquer. Notez que je veux d' autres épisodes, comme aller ici. Cela va aller pour la zone visible. N'oubliez pas que si nous sélectionnons un cadre parent et le déclipsons , nous pouvons voir tout ce qui se trouve ci-dessous. Vous pouvez donc également le faire dans mon exemple, et vous pouvez voir qu'en fait, ils n'en ont que deux ici. Mais oui, tout ce qui est plus grand que votre cadre deviendrait visible. Il est très important de toujours s'en souvenir. La dernière chose dont j'ai besoin, c'est mon petit bar ici. Copions simplement ceci. Sélectionnez le cadre et, comme nous le savons, il va le coller directement en place. Super, nous en avons donc terminé avec le second. OK, super. Maintenant, nous n'avons besoin que de notre dernier. Allons y jeter un œil. Notre dernier épisode est l'épisode où il est noté que cela est placé sur un propre cadre et que nous avons ensuite simplement un carré. Nous avons du texte, cette barre de jeu ici. Il s'agit simplement d'un cadre avec une autre forme à l'intérieur. Si c'est trop compliqué, copiez simplement celui que j'ai créé ici. Et nous voici à nouveau du texte. Ici, vous pouvez voir qu'il s'agit simplement d'un cadre avec des coins arrondis et un petit trait. Puis j'ai placé le triangle que j'ai créé à l'intérieur d'ici. Alors regardez si vous pouvez le découvrir vous-même avec la solution donnée. 24. Partie 1: Comme deuxième partie de nos bases, nous voulons donner vie à ce cadre métallique et y ajouter des images et des couleurs. Je vous ai fourni le matériel. Voici donc toutes les images. Ici, vous avez également quelques icônes. Et j'utilise un dégradé. Tu peux t'en servir. Je vais vous montrer comment faire dans une seconde , mais ce n'est pas obligatoire. Bien entendu, vous pouvez également utiliser le noir non éclaboussé ou toute autre image de OK, sautons ici. Ce que je vais faire, c'est copier mon cadre métallique. Vous pouvez soit utiliser la solution sur laquelle vous avez travaillé , soit celle que je vous ai fournie. Ce que je vais faire, c'est le copier à nouveau à côté de ma solution. Cela me permet donc de tout saisir un peu plus facilement. En fait, je n'ai pas besoin des grilles, alors désactivons-les. Je vais juste y aller petit à petit. Je vais commencer par la section consacrée aux héros ici et rapprocherons également un peu plus nos images. Et je vais utiliser ce petit dégradé ici dans le second. OK, super. Je vais donc commencer par la première image. Je vais le récupérer, je vais maintenir la commande Shift enfoncée et voir que cette copie est au format PNG. Si vous ne savez toujours pas comment utiliser les images, revenez à la vidéo où nous trouvons les différentes options d'utilisation des images Copiez une image existante, vous pouvez également sélectionner n'importe quel cadre ou forme. Cliquez sur Remplir, puis sur Image, et choisissez une image. Ou bien sûr, vous pouvez utiliser le bouchon anti-éclaboussures auquel nous avons jeté un coup d'œil lors des séances Je vais le copier à nouveau, commande Shift, et c' est mon option préférée. Ensuite, je vais simplement appuyer sur la commande V et le copier ici. Et je vais aussi le faire avec ce petit garçon ici présent. Maintenant, vous pouvez voir que je veux plus de contraste. C'est pourquoi j'ai créé cette superposition ici. En fait, je pense que dans mon exemple, c'est une meilleure superposition car elle couvre toute la taille de l' Je vais le copier. Je vais le placer sur l'image ici. Il ne me reste plus qu'à accéder à mon panneau de calques et j'ai l'arrière-plan de l'image. J'ai ça, d'accord, ça a l'air bien. Et j'ai tout ça en haut. Je vais donc sélectionner le texte. Je vais juste le remplacer par du blanc. Ça a l'air sympa. Ne vous inquiétez pas trop pour les dégradés. Nous les utilisons, pas trop le nouveau design des yeux, mais si vous voulez y jeter un œil, suffit de cliquer sur le dégradé que j'ai créé. Et vous pouvez voir qu'au lieu d'une image, vous pouvez également créer des dégradés ici Vous pouvez également changer les couleurs. Je vais mettre ma barre d' onglets sur le côté et je vais ajouter le reste de mes images et je vais simplement les copier toutes avec mes jolis petits raccourcis. Ensuite, je veux changer la couleur de fond. Je vais déjà récupérer mon texto. Laisse-moi juste le déclipser pour récupérer tout le texte. Si vous maintenez la touche Shift et les commandes enfoncées sous Windows, vous pouvez sélectionner plusieurs textes et les sélectionner en profondeur. Comme il est imbriqué, sélectionnons tout cela. Si vous ne les sélectionnez pas un par un, même résultat. Et je vais opter pour du blanc ici et je vais faire de même pour les gros titres. OK, super. Maintenant, je vais changer la couleur de mon arrière-plan. Je le fais via le remplissage du cadre parent. Encore une fois, je vais simplement le choisir à partir de mon exemple ci-dessus. Découpons-le à nouveau. Ça a l'air plutôt bien. Et c'est beaucoup plus facile que tu ne le pensais, n'est-ce pas ? J'ai juste besoin de trier ma barre de touches ici. J'ai ajouté quelques icônes pour vous. Laisse-moi y jeter un œil. Les icônes que nous allons diriger sont la maison, la recherche et le cœur. Je vais déjà copier ce bouton de lecture. Mettons-le ici. Maintenant, configurons d'abord notre navigation. Tout ça a l'air bien. Je vais d'abord changer la couleur, la couleur de fond. Je vais également choisir, à partir de mon exemple, puis je vais sélectionner tous les textes et je vais les remplacer par du blanc. Je vais me débarrasser de ces petits points que j'avais ici. Encore une fois, maintenez toujours les touches Shift et Command ou Control enfoncées. De cette façon, vous pouvez sélectionner plusieurs éléments en profondeur ou simplement y aller un par un si c'est encore trop rapide. Maintenant, je vais ajouter Little Home ici. Je vais le remplacer par ma recherche. Et je vais mettre mon bouton ici, super. Il ne me reste plus qu'à sélectionner celle-ci, car je veux également que cette couleur de remplissage ressemble à celle de mon exemple. OK, super, alors maintenant je peux le rajouter ici Encore une fois, je vais simplement le copier. Et je peux déjà le coller ici. Maintenant, faisons de même pour celui-ci. Je vais prendre cette image, la coller ici. Je vais m'en débarrasser et utiliser une autre icône qui m'a été fournie. J'ai du dos et du bas. Copions-les également. Amenons-les ici. Et je vais le placer ici. En fait, regardons l'exemple, car vous pouvez voir que je l'ai déjà placé sur un cadre couvrant toute la largeur, cela ne fera que faciliter sa manipulation par la suite. Je vais juste l'entourer d'un cadre invisible. OK, super. Maintenant, je vais partir tel quel. Je vais juste faire traîner ça pour le moment. Je vais sélectionner mon texte. Tout est blanc maintenant, je peux à nouveau modifier le remplissage de l' arrière-plan. Je passe par là assez vite. Ce n'est vraiment qu'une référence pour vous Prenez votre temps, prenez la solution suggérée et essayez vraiment de la comprendre à votre rythme. Maintenant, je veux travailler sur mes épisodes ici. J'ai un bouton de lecture qui contient les icônes suggérées. Je vais aussi lui donner une couleur de fond, juste pour que je puisse le voir et le gérer un peu mieux. Pour l'instant, je vais me débarrasser de ce triangle et utiliser mon bouton Play. Vous pouvez déjà le positionner correctement, ce n'est pas nécessaire. Ensuite, sélectionnez le texte. Ensuite, changeons le remplissage en blanc. Celui-ci, ici aussi. Assurez-vous que nous les avons tous. En fait, je vais le laisser tel quel, car je pourrai alors le remplir. Je vais juste mettre ça de côté pendant un moment. Il n'y a pas d'endroit pareil ici. Je peux maintenant simplement saisir cette image. Je peux le mettre dans mes formes. Remarquez que dès que vous voyez le nom du cadre, il est sauté en dehors de ce cadre. Ce que vous pouvez faire si vous voulez en ajouter un autre mais qu'il ne cesse de sauter, il vous suffit de le sélectionner. Il suffit d'en faire une copie, vraiment très légèrement en dessous. Ensuite, utilisez-le avec les touches de votre clavier pour qu'il reste à l'intérieur. Ou réorganisez-le simplement dans votre panneau de couches. OK, nous pouvons maintenant sélectionner le cadre parent. Découpons-le à nouveau. Nous pouvons replacer notre bar ici. Le moyen le plus simple est en fait d'en copier un qui est déjà placé au-dessus et de le coller à nouveau ici. Laisse-moi juste ranger celui-ci ici, range-le bien. Nous pourrions également organiser un peu les distances que nous avons ici. Passons maintenant à la dernière, qui est notre superposition Je vais prendre la couleur de fond à partir d'ici. Maintenant, remarquez que celui-ci est un cadre à part entière. Appelons cela une superposition. Cela contient toutes les informations, car plus tard , si nous cliquons sur une chanson, allons simplement nous glisser ici, et nous asseoir comme ça. Pour cette superposition, j' ai une couleur légèrement plus claire Je vais également choisir cela à partir de mon exemple. Débarrassons-nous de celui-ci ici. Nous allons faire la même chose qu'ici. Nous avons un petit bouton bas que nous allons saisir. Je vais déjà l' entourer d'un cadre. En fait, c'était un rectangle. Appuyons à nouveau. Nous avons besoin d'un cadre, pas d'un rectangle. Maintenant, nous pouvons le placer et maintenant vous pouvez voir qu'il est bien placé à l'intérieur pour l'image ici. Je vais simplement copier mon image à partir de n'importe quel design existant ou ici à partir de mes échantillons. Maintenant, je peux sélectionner mon texte, le mettre en blanc ici. En fait, je vais simplement utiliser mon bouton Play. Je vais le placer ici. Vous vous souvenez de la façon dont nous pouvons évoluer ? Tu t'en souviens exactement ? Nous devons appuyer sur K, le bouton Scale. Maintenant, je peux soit ajouter n'importe quelle valeur, soit l'augmenter. Ce que je vais faire, c'est devoir doubler la taille ou quelque chose comme ça. OK, super. Le dernier point est là, mon texte. Assurez-vous toujours de sauter nouveau hors de l'outil de balance. Et maintenant, vous pouvez voir votre panneau de propriétés générales. Nous allons donc changer la couleur pour cela. Maintenant, je vais m'emparer de cette petite grange. Encore une fois, si vous souhaitez effectuer une sélection approfondie, appuyez sur Commande ou Ctrl. Et je vais maintenant simplement sélectionner ma couleur de haute lumière. Voyons si ce gris aussi, je pense qu'il est légèrement plus clair. D'une manière ou d'une autre, j'ai perdu mon petit cercle. Je vais juste m'inspirer de mon exemple. Vous pouvez également détruire à nouveau un cercle, et je vais le placer ici. Maintenant, si c'est placé comme ça, si jamais vous avez quelque chose comme ça, c'est parce que le contenu de ce cadre a été découpé Vous pouvez donc simplement le déclipser. Je lui ai juste donné un peu plus d'espace pour que ma petite bulle s'adapte parfaitement. Comme vous pouvez le constater, en utilisant simplement des cadres de formes générales, en remplissant certaines images et en jouant avec les couleurs, nous créons une interface utilisateur assez impressionnante. Et d'ailleurs, ne soyez pas frustré si ce n'est pas aussi rapide que ce que je vous ai montré dans cette vidéo. Je fais ça depuis un bon moment. De plus, je suis en train de l'enregistrer pour pouvoir m'arrêter et découper des morceaux. Et il s'agit simplement d'une vidéo pour vous aider dans la vraie vie. Cela va simplement prendre plus de temps. Alors asseyez-vous, prenez votre temps et jouez avec. 25. COMPOSANTS 01 Composants et instances dans Figma: Découvrons l'une des fonctionnalités les plus importantes de Figma . Une fois que vous aurez commencé à concevoir, vous remarquerez que vous allez concevoir les mêmes éléments encore et encore. Donc, des choses comme ma navigation et mes cartes. Et d'ailleurs, n'oubliez pas de déchiffrer votre cadre parent afin de voir tout le contenu Maintenant, au lieu de refaire ces éléments et d'essayer de suivre les modifications, il est beaucoup plus pratique d' avoir une sorte de modèle, nous appelons infigma Et à partir de ce composant, vous pouvez créer des copies d'Infigma, que nous appelons une instance, que vous pouvez utiliser dans votre design . Configurons donc cela. Je vais utiliser cette navigation ici parce que je veux prendre immédiatement l'habitude de séparer mes composants de mon design. Pour transformer la navigation en composants, il suffit de la sélectionner, dans le panneau des propriétés de droite, cliquer sur le symbole du composant. Notez comment cela va se traduire par un contour violet et un signe de composant attaché au nom. Et vous pouvez constater le même changement dans le panneau Calques. Pour créer un composant, vous pouvez également utiliser le raccourci, la commande Alt ou Option et K, ou simplement cliquer avec le bouton droit de la souris et choisir Créer un composant. Nous voulons maintenant utiliser une instance, donc une copie de ce composant dans notre conception. Il existe également plusieurs moyens de le faire. Vous pouvez créer une instance simplement en la copiant et en la collant ou en utilisant une méthode un peu plus rapide, touche enfoncée, puis en retirant simplement une copie, que vous pouvez ensuite placer dans votre design Notez que l'instance possède également un contour violet, mais qu'elle a une forme de losange vide. Pour créer une instance également accéder au panneau Ressources, se trouve juste à côté de votre panneau Couches Il verra tous les composants que vous avez créés dans fichier ou ultérieurement que ce fichier ou ultérieurement que vous avez connecté à une bibliothèque externe. Vous pouvez simplement retirer ce composant, puis le placer sur votre dessin. Supprimons donc notre navigation depuis la page Articles, puis remplaçons-la également par notre instance. Outre le panneau Ressources, vous pouvez également utiliser la fonction de recherche, accéder aux ressources, puis simplement effectuer une recherche par nom. Faisons de même pour notre carte. Et cette fois, je veux utiliser un raccourci. Si vous oubliez un raccourci, simplement le curseur sur le symbole du composant passez simplement le curseur sur le symbole du composant pour qu'il apparaisse ici Dans mon cas, il s'agit de l'option Command K. Passons maintenant au panneau Ressources où je peux voir que ma carte a été enregistrée tant que composant et je peux l'intégrer à mon design. Je souhaite également remplacer l'autre carte, alors débarrassons-nous d'elle. Et d'ailleurs, je peux aussi simplement copier directement à partir d'une instance existante. Si vous maintenez la touche Shift enfoncée et que vous maintenez la touche Alt enfoncée, vous copierez la même ligne juste en dessous. Cependant, il copie également le contenu de mon composant. Donc, ce que je vais faire, c'est que mon composant est généralement assez neutre Je vais donc me débarrasser de cette image ici et la remplacer en cliquant sur le signe plus par un remplissage neutre. Et puis mon titre, je vais aussi juste appeler titre J'essaie donc généralement de faire en sorte que tous mes composants soient assez neutres, puis je renseigne les informations, le contenu de mon design. Découvrons donc comment procéder. 26. 02 Exécutions de remplacement: Découvrons ce qu'il faut remplacer et comment le remplacer dans nos instances. Nous avons donc ici un tas de composants, et nous utilisons des instances de ces composants dans notre conception. Vous pouvez le constater en jetant un coup d'œil au panneau des couches, et vous pouvez voir la forme d'un losange vide. Si vous voulez voir le composant d'origine, le côté droit, juste à côté du nom du composant, cliquez sur Accéder au composant principal pour passer au composant d'origine que vous avez utilisé pour configurer cette instance. Je laisse donc généralement mes composants assez neutres et descriptifs. Mais dans ma conception, je souhaite évidemment ajouter du contenu, donc je veux transformer ces arrière-plans gris en images, et je veux ajouter un titre Donc, pour mon titre, je pourrais simplement double-cliquer puis le remplacer Je peux faire de même pour mes images. Je peux simplement remplir puis passer à l'image et les importer, ou je peux utiliser mon raccourci avec cette commande Shift et K, et je vais importer ces images en masse. Je peux maintenant simplement les déposer dans les formes. Je veux aussi le cloud ici. Je vais le sélectionner avec mon raccourci Shift et C, qui copieront un fichier PNG, et je peux maintenant simplement le coller dans la forme ici. Cependant, il se peut que vous ne souhaitiez pas que certains éléments soient remplacés Par exemple, ce bouton de retour ici, je veux toujours qu'il soit rappelé. Je peux donc simplement sélectionner mon composant, puis sélectionner le texte que je souhaite conserver fixe. Dans mon panneau des couches, si je passe le curseur dessus, je peux voir ce petit verrou, puis verrouiller cette couche heure actuelle, dans le design, personne ne serait en mesure de cliquer pour modifier ce texte. Maintenant, l' avantage de configurer votre conception avec des composants et des instances est que même si vous remplaciez cela, vous pourriez toujours concevoir vos composants Par exemple, ici, nous souhaiterons peut-être modifier un peu le paramètre. Nous souhaiterons peut-être augmenter la taille de ce texte, et vous verrez que toutes les instances suivront. En outre, quelques changements de mise en page plus spectaculaires. Supposons que nous voulions déplacer notre menu vers la gauche, afin que toutes les instances suivent. Deux petits commentaires, vous vous demandez peut-être pourquoi ce composant est là, ce composant arrière est installé sur toute la largeur, pourquoi s'étend-il sur toute la largeur et est-il entouré de tout l'espace ? Tu n'es pas obligée de le faire comme ça. Vous pouvez également simplement prendre le texte et le transformer en composant et c'est votre bouton. Je l'aime bien comme ça. De cette façon, je sais déjà que c'est la distance. Je dois juste le mettre juste en dessous de ma barre de navigation, et je n'ai pas à me soucier de la même distance entre les images si je crée d'autres pages. Mais n'hésitez pas à trouver votre propre méthode pour configurer cela pour votre design. L'autre question que vous vous demandez peut-être est : qu'en est-il du texte ? Cela ne doit-il pas également être un composant ? Eh bien, vous pouvez configurer du texte, par exemple, ici où il est logique que par exemple, ici où il est logique le texte soit un lien, ou cela peut être une introduction, où vous pouvez ajouter plus de détails, peut-être des icônes ou quelque chose comme ça Vous pouvez avoir une composition définie et la transformer en composant. Mais il suffit de copier du texte, juste du texte standard sur votre design comme celui-ci, n'a pas besoin d'être un composant. 27. 03 Ce qu'il faut remplacer et ce qui ne doit pas être: Ce que vous pouvez remplacer et ce que vous devez remplacer. Figma vous offre maintenant de nombreuses options à remplacer. Vous pouvez remplacer les couleurs, les images, le texte, les styles, l' opacité, les effets tels que les ombres, les flous et la visibilité Mais juste parce que vous pouvez théoriquement les remplacer, je ne recommande pas de les remplacer toutes Je recommande généralement de ne remplacer que le texte et les images, donc tout ce qui proviendrait d'une base Si vous souhaitez d'autres modifications, comme une couleur d'arrière-plan, il s'agira d'une nouvelle version de ce composant. Je mettrais donc en place un autre composant pour cela. Vous pouvez ensuite combiner ces versions dans un ensemble de composants avec des variantes. Nous aborderons ce sujet plus tard dans le cours. 28. 04 Réinitialiser les composants et les remplacements: Inversion des composants et remplacements. Ici, j'ai un composant et une instance, et vous pouvez voir que dans mon instance, j'ai remplacé un certain nombre de choses, comme l'image, le trait et l'arrière-plan Et si ça ne me satisfait pas ? Assurez-vous que l' instance est sélectionnée, puis dans le panneau des propriétés situé à droite, vous pouvez voir le nom de l' instance, et plus à droite, vous pouvez voir trois petits points, le menu Plus d'actions. Juste à l'intérieur, vous voyez les options de réinitialisation. Nous pouvons soit simplement réinitialiser des éléments individuels, comme par exemple réinitialiser le trait, soit sélectionner la carte et tout réinitialiser. Voyons ce que nous trouvons d'autre dans ce menu. Donc, ce que nous pourrions également faire c'est passer au composant principal, ce qui signifierait que nous nous retrouverions ici. Nous pourrions créer un composant supplémentaire pour cela. Donc, si je cliquais ici, vous verrez qu'il ne s'agit que d'un autre composant. Lorsque vous commencez, veillez à ne pas l'utiliser sur une instance existante, car vous attendre à un autre composant de carte, mais ce qu'il fait, c'est empaqueter l'instance dans un autre composant appelé carte, l'instance dans un autre composant appelé carte, donc il l'imbrique, et est probablement pas ce que vous recherchez Donc, à moins que vous ne soyez vraiment à l' aise avec les composants, essayez de vous en tenir à l' écart pour le moment. Nous pouvons détacher l'instance. Maintenant, tu dois faire attention à celui-ci. Ne détachez aucune instance si vous travaillez dans un système de conception. Cependant, si vous explorez simplement votre propre design et que vous faites des allers-retours entre les choses, vous pouvez parfaitement l'utiliser. Mais que se passe-t-il, disons que vous n' avez qu' un composant et que vous l'avez créé par accident. Désormais, il n'est plus possible dans le panneau des propriétés revenir à l'état d'origine d'un cadre. Ce que vous pouvez faire, c'est extraire une instance et supprimer le composant d'origine. Sélectionnez l'instance et remarquez que cela vous donne également la possibilité de restaurer un composant. C'est vraiment une bonne nouvelle si vous supprimez un composant par accident, il vous suffit de cliquer ici pour restaurer votre composant d'origine. Pour le moment, ce n'est pas ce que nous recherchons. Ce que nous voulons, c'est juste le cadre original. Dans ce cas, vous utiliseriez maintenant l'instance, puis vous aurez à nouveau un cadre simple. 29. 05 Composants d'imbrication: L'avantage des composants de Figma est que vous pouvez également les imbriquer. L'imbrication signifie que nous pouvons avoir deux composants, puis créer une instance d'un composant et la placer dans un autre composant Prenons cet exemple ici. J'ai un système de navigation, un formulaire de connexion et juste une carte standard. Je vais transformer ces trois éléments en composants. Petite astuce, lorsque vous avez sélectionné plusieurs éléments, dans le menu déroulant plus d'options, vous pouvez alors créer plusieurs composants à la fois. Je peux maintenant faire glisser des instances et les utiliser pour mon design. Je vais juste utiliser cette navigation ici et cette carte comme exemple. Mais remarquez que je réutilise le même bouton dans tous les composants Il est donc recommandé de retirer le bouton et de créer son propre composant pour le bouton. Je vais maintenant supprimer les boutons uniques que j'utilisais précédemment et les remplacer par une instance de mon composant de bouton que je viens de créer. Je peux maintenant remplacer le texte, alors inscrivez-vous ici dans la navigation, connectez-vous et abonnez-vous pour obtenir ma carte d'atelier Et comme vous pouvez le constater, tout cela se reflète sur le côté droit de mon design. Maintenant, changeons le composant principal de notre bouton. Ajoutons un peu de rayon et changeons la couleur. Comme vous pouvez le constater, toute modification apportée au composant principal sera répercutée sur l'ensemble du design. Peu importe qu'il soit imbriqué dans un composant ou qu'il s'agisse d'une instance d'un composant imbriqué. 30. 06 ensembles de composants avec des variantes: Variantes Figma. Parfois, il se peut que vous ayez besoin de variantes d'un composant. Voici un exemple où j'ai une version par défaut d' une carte et une version survolée d'une carte La seule différence ici est qu'il a une couleur de fond. Vous pourriez donc dire que je pourrais simplement ajouter cette couleur d'arrière-plan dans mon instance et la remplacer Prenez l'habitude de ne pas remplacer les modifications de mise en page ou les modifications de variation Nous voulons uniquement remplacer les modifications de contenu, telles que les images ou le texte Il s'agit d'une nouvelle variante de cette carte. Par conséquent, il doit s'agir d'un composant à part entière afin que les futurs développeurs voient que c'est ce qu'ils doivent programmer et planifier. Maintenant, en théorie, vous pourriez l'utiliser comme ça et avoir deux composants distincts. Mais il existe une belle couche d'organisation supplémentaire dans Figma, appelée ensemble de composants avec variantes, qui vous permet de regrouper différentes versions d'un même composant Notez comment j'utilise la convention de dénomination des barres obliques. Ils portent déjà le même nom, ils sont appelés card forward slash default, puis card forward slash La première chose ici serait le nom du composant, puis le second nom après la barre oblique, ce serait la propriété Si je sélectionne ces deux cartes maintenant, je peux voir sur le côté droit composants se combinent pour former des variantes. Si je clique dessus, vous verrez que Figma crée ce contour en pointillé violet génial, c'est que vous pouvez désormais simplement extraire une instance. Ou vous pouvez simplement utiliser le panneau des actifs ainsi qu'avec n'importe quel autre composant. Il vous montrera la première variante. Si vous cliquez sur cette instance, dans le panneau de propriétés de droite, vous pouvez voir une petite liste déroulante. Avec cette liste déroulante, vous pouvez désormais basculer entre les différentes variantes de votre ensemble de composants. Maintenant, cela s' appelle simplement Property One Now. Vous pouvez également cliquer sur votre ensemble de composants, puis double-cliquer sur la propriété . Vous pouvez désormais l'appeler, par exemple, état. Vous pouvez ajouter d'autres variantes. Disons que vous voulez quelque chose comme un état désactivé Il suffit de l'ouvrir un peu, puis passer ici à votre première ou à votre deuxième variante, et vous verrez ce petit signe plus bas ici. Cliquez dessus et il en créera un autre pour vous. Maintenant, ce que nous pouvons faire, c'est que je vais simplement donner à cette opacité de 50 % et je vais la qualifier d'inactive Maintenant, ce que je dois faire, c'est nommer l'État. Il s'appelle automatiquement état 3, mais je vais le remplacer par inactif. Maintenant, si je sélectionne mon instance, vous pouvez voir que dans le menu déroulant, je peux maintenant choisir entre le nouvel état et les deux états que j'ai créés auparavant. D'ailleurs, si vous n' avez pas encore transformé vos éléments en composants, il existe également un raccourci vous permet de sélectionner plusieurs éléments, puis vous obtenez un petit menu déroulant à côté du signe du composant dans votre barre supérieure. Utilisez ce menu déroulant et sélectionnez Créer un ensemble de composants. Cela va créer le jeu de composants immédiatement. Maintenant, je n'ai pas utilisé la bonne convention de dénomination avec la barre oblique Je peux aussi le faire maintenant, donc je peux nommer cette carte. Ensuite, je vais à l'intérieur, puis j'ai ma propriété, et je veux l' appeler par défaut, et je veux que ma seconde s'appelle HVA Et je peux cliquer à nouveau sur mon ensemble de composants pour le changer en état. Maintenant, si je reçois une instance, vous pouvez voir que cela fonctionne comme avant et que mon Hova et mon état par défaut sont intégrés 31. 07 Déplacer les composants vers leur propre page 2: Comment déplacer nos composants vers leur propre page ? Ici, j'ai mes composants et j'utilise des instances de ces composants dans ma conception ici. stocker votre composant juste à côté de votre conception pendant que vous travaillez encore sur vos conceptions. Mais une fois que vous avez terminé et vous savez comment configurer vos composants, il est temps de faire un petit ménage et de trouver une zone réservée à vos composants. Il existe des techniques plus avancées et vous pouvez stocker vos composants dans des bibliothèques externes. Mais dans un petit projet pour le moment, nous voulons simplement les stocker sur leur propre page. Allez donc en haut à gauche de votre fichier et cliquez sur le bouton Plus. Cela va ouvrir une nouvelle page, que vous pouvez appeler composants. Nous pouvons revenir à notre page d'origine, que nous pouvons également appeler design maintenant. Et maintenant, si nous devions simplement copier ce composant, passer à la page du composant et le coller, cela collerait évidemment une instance. C'est ce que nous ne voulons donc pas. Alors, comment pouvons-nous déplacer de la page de conception à la page des composants ? Ce que vous devez faire, c'est soit utiliser le clic droit, puis vous pouvez voir passer à la page, et cela vous montrera la page que vous venez de créer, soit une meilleure technique consiste à utiliser la commande et X, et cela va couper le composant. Vous pouvez maintenant accéder à la page du composant, où vous pouvez coller le composant. Maintenant, si nous revenons à notre page de conception, nous pouvons voir que si nous cliquons sur cette instance ici, puis sur le signe de notre composant à côté du nom de l'instance, cela nous amène au composant principal et il va passer à la nouvelle page. Génial. Faisons-le également pour le reste des composants. Sélectionnons-les tous, commandons un x pour les couper, puis collons-les dans notre page de composants. Si nous revenons à la conception, vous pouvez voir que toutes les connexions sont intactes. D'ailleurs, vous voyez parfois que les gens ajoutent de petites icônes devant le nom. Vous pouvez simplement les ajouter en appuyant sur la commande de contrôle ou sur barre d'espace, puis vous trouverez ici différentes icônes. En voici quelques-unes que j'ai déjà utilisées pour le design. J'aimerais utiliser quelque chose comme cet arc-en-ciel. concerne mes composants, il y a en fait si vous fouillez profondément dans vos émoticônes, je pense qu'ici, vous trouvez un signe de composant ou quelque chose qui ressemble à un signe de composant, et j'aime bien utiliser celui-ci 32. 08 Garder les composants organisés: Maintien de l'organisation des composants. Supposons que vous travailliez sur votre design et que vous ayez créé une page séparée pour vos composants. Maintenant, vous avez tous vos composants ici, mais en ce moment ils sont un peu en désordre. Assurons-nous donc que nous-mêmes, ainsi que les autres concepteurs et développeurs susceptibles d'entrer dans notre fichier, comprenons ce qui se passe. Donc, tout d'abord, regroupons-les un peu. Ici, j'ai mes icônes générales. Alors j'ai ma carte. Et puis, ici, j'ai mes composants liés à la navigation. Vous pouvez donc voir l' en-tête, la barre d'onglets, éléments imbriqués et ces icônes, qui ne sont que les icônes de la barre adhésive Et puis plus loin, j'ai mes boutons. Je souhaite créer une section propre pour chacun d'entre eux. Et maintenant, nous utilisons des sections et non des cadres pour stocker nos composants. Vous trouverez des sections dans la barre d'outils juste à côté des cadres, ou vous pouvez simplement utiliser un raccourci Shift et S, et vous pouvez ensuite dessiner vos sections autour des clusters que vous avez créés. Et je peux double-cliquer sur le nom de la section et je peux maintenant la nommer. Je vais appeler celle-ci ici navigation. Passons au panneau Ressources, voyons ce qui s'est passé et vérifions-nous que l'affichage des sous-dossiers est activé Je vais passer au format liste, pour cela soit plus facile à voir, et vous pouvez voir que tous mes composants sont répertoriés uniquement dans la couche supérieure, et vous pouvez voir qu' un dossier a été créé pour mes éléments de navigation. Je vais également le faire pour le reste de mes composants. Je vais appuyer sur Shift S, et je vais dessiner une section autour de ma carte. Je vais faire de même pour mes icônes, et une dernière pour mes boutons. Alors maintenant, jetez un œil à mon panneau d' actifs ici. Si je le renomme maintenant, j'ai donc une carte, des icônes et des boutons Ainsi, en créant ces sections, vous pouvez constater que dans mon panneau de ressources, j'ai désormais des sous-dossiers et qu'il est plus facile de trouver mes composants Une autre chose que j' aime dans les sections c'est que si vous sélectionnez le nom de la section, vous pouvez voir cette petite icône à côté qui indique « Prêt pour le développement ». Si vous cliquez dessus, vous verrez apparaître cette bulle verte. Maintenant, si nous passons en mode sourd, c'est-à-dire que c'est ici que vos développeurs peuvent consulter vos conceptions, vous pouvez constater que cela crée un ancien dossier indiquant aux développeurs quels composants ou conceptions sont déjà prêts pour les prochaines étapes de développement. Prenez donc l'habitude de stocker vos composants dans leur propre zone désignée sur des sections, que vous pourrez ensuite marquer comme prêtes pour le développement. Pour commencer, nous stockons nos composants sur une page séparée. Mais si vous avez un forfait Pro ou supérieur et que vous travaillez au sein d'une équipe plus importante, vous constaterez peut-être également que les composants sont stockés dans un fichier séparé, et que nous utilisons les bibliothèques d'équipe dites partagées pour travailler avec eux. Notre système étant de plus en plus avancé, vous pouvez également voir que vous pouvez ajouter plus d'informations à ces sections. Ne soyez pas trop stressé à ce sujet. Commencez modestement et organisez-vous par sections, et vous pouvez toujours ajouter des informations supplémentaires à ces sections. 33. Composants de la partie 2: Si vous n'êtes pas à l'aise avec les composants, les instances et les variantes, nous pouvons maintenant intervenir. la deuxième partie de notre projet de cours, nous voulons transformer le design que nous avons créé en un design réutilisable basé sur des composants. Vous pouvez soit utiliser la solution de la première partie, soit simplement copier ma solution suggérée d'ici, ce que j'ai fait pour vous. Je passe en revue mon design, puis je retire simplement éléments qui, selon moi, auraient du sens en tant que composants réutilisables. Maintenant, personne n'a raison ou tort, c'est à vous de décider, et vous pouvez également modifier cela ou, à l'avenir, nicher les éléments différemment. Mais il faut bien commencer quelque part. Je vais vous montrer comment j' aborde cette question. J' y suis allée petit à petit. Par exemple, j'ai commencé par ma section héros, parce que je réutilise cette image ici. J'ai en fait retiré cette partie intérieure. J'ai sélectionné tout cela. Permettez-moi de me rapprocher un peu plus. Je sélectionne l'image, texte et le bouton, puis j'appuie sur la commande G ou je clique avec le bouton droit de la souris, et je le transforme en cadre. Je suis en train de le démonter, vous pouvez le voir ici, je viens d'appeler cette info. C'est donc ce que j'ai créé ici. J'ai ensuite fait de même pour les autres éléments. J'ai retiré la barre du haut, puis la barre du bas pour la superposition. C'est donc ça ici. Je l'ai parcouru petit à petit. Donc, cette image, puis j'ai mes cartes, évidemment, je peux appuyer sur mes éléments ici. C'est en fait à vous de décider comment vous voulez le configurer ici. Par exemple, je l'utilise comme composant. Vous pouvez également l'avoir en tant que composant. Et comme je l'ai dit, il n'y a pas de bien ni de mal. Je le trouve juste un peu plus confortable car je vais probablement réutiliser cette partie un peu. Et j'ai décidé de faire de même pour le play bar. Toute cette zone de contrôle est donc une seule composante. Encore une fois, plus tard, vous pourriez avoir sous forme de composant imbriqué En tant que composant imbriqué, cela dépend de vous, mais restons simples pour le moment Maintenant, dans ce dossier, j' ai ma solution finale. Si vous accédez aux pages, vous voyez le design final et vous voyez également une page de composant. Vous pouvez donc voir ici tous les composants, comment je les organise , les configure, les nomme, etc. Et c'est ce que j' utilise dans mon design final. Je suggère donc que vous ne trompiez pas avec mes composants copiant tout cela dans un nouveau fichier. Sélectionnons en fait mes exemples et extrayons les composants potentiels que j'ai créés. Passons à un nouveau fichier de design et collons-le simplement ici. J'aime bien que mon arrière-plan soit un peu plus clair. Et d'ailleurs, tu peux changer ça. Si vous cliquez sur le canevas, vous pouvez voir ici sur la page que vous pouvez changer de couleur. Je trouve juste que c'est un peu plus confortable. Maintenant, vous pouvez avoir votre propre fichier avec vos composants sans vous tromper avec le même nom. Je peux soit sélectionner chacun d' entre eux individuellement, puis les transformer en composants, soit les sélectionner tous. Cliquez sur un petit menu déroulant et créez plusieurs composants. n'est pas un ensemble de composants, c'est autre chose comme nous le savons maintenant, mais plusieurs composants. Maintenant, je suis en train d'imbriquer certains de ces composants, par exemple les icônes, je dois juste les nettoyer car celui-ci ne saura pas que vous voulez qu' il soit imbriqué Je vais juste trouver un exemple de celui-ci, de celui-ci. Je vais maintenant remplacer ces éléments par des éléments imbriqués, afin que tout reste beau et propre C'est ce que nous ferions, et pour toutes les icônes, laissez-moi regarder, par exemple, notre bouton de lecture ici. Nous remplacerions également cela par une instance, et nous avons la même ici. Vous pouvez donc déjà voir que nous sommes en train de réutiliser, ce qui est vraiment bien, si nous pouvions changer quoi que ce soit dans ce bouton Play. Il en sera de même partout. Celui-ci peut toujours être un bouton de lecture redimensionné, ou vous pouvez l'avoir en tant que composant propre, encore une fois, à vous de décider OK, maintenant nous devons configurer ces modèles, encore une fois avec les composants. Cela semble fastidieux, mais c'est en fait assez rapide. Alors faisons-le. Débarrassons-nous de cela, et je vais simplement faire glisser notre couverture ici, puis nos informations. Ensuite, je vais faire de même ici. Je vais supprimer les doses, et je vais les remplacer par des instances. Ce que nous devons faire, bien sûr, c'est replacer nos images. De plus, je vais probablement le faire un peu plus proprement que je ne le fais ici Respectez mes distances et tout le reste, mais faites-le juste pour vous le montrer rapidement. Fais-le comme ça. Nous avons besoin de nos images. Revenons ici. Et nous pouvons simplement copier nos images dans ce fichier. Nous les avons à portée de main. Parce que ce que je ferais de toute façon, je vais probablement me débarrasser des images de mon composant Veillez également à toujours saisir l'image et non notre petite superposition de dégradé que nous avons créée Maintenant, nous devons ajouter un remplissage. C'est en effet un peu fastidieux. Il faudrait replacer ces images. Nous aimerions, dans nos composants, les avoir beaux et neutres. Ensuite, dans notre design, nous devions refaire nos images Mais comme ça, nous pouvons rapidement reconfigurer notre design, car vous verrez évidemment toutes les modifications , car maintenant c' est basé sur des composants, il ne vous restera suivre et il sera très à suivre et il sera très facile de tout mettre à jour. Ensuite, prenons également notre barre d'onglets. Vous pouvez le voir comme ça, j'ai maintenant mon même design qu' un design basé sur des composants. Je ferais de même pour que mes autres pages fonctionnent. C'est bien d'avoir tout sur une seule page, mais n'oubliez pas nous voulons que nos composants soient stockés sous des pages. Assurez-vous de créer votre propre page appelée composants. Vous pouvez maintenant y envoyer vos composants, soit en les sélectionnant tous avec le bouton droit de la souris, passant à la page et aux composants. Ou vous pouvez les couper, c' est-à-dire commander et x, pas commander et copier. Ce doit être x. Et vous pouvez maintenant les coller ici, ils conserveront les connexions. Par exemple, si vous cliquez ici, vous pouvez maintenant cliquer sur la petite icône du composant pour accéder à votre composant principal sur la page. N'oubliez pas que nous voulons stocker nos composants sur des sections. Les sections se trouvent ici sous les cadres. Nous voulons créer des sections, par exemple 14 icônes, puis placer toutes nos icônes ici, puis une pour la navigation, etc. Vous pouvez accéder à votre fichier d'exercices dans Composants et guides. Vous aurez ici une idée de la façon dont j'organise mes composants. Au fait, j'utilise un petit système de gestion de fichiers que j'ai créé. Vous n'êtes pas obligé de l'utiliser, mais vous pouvez l'utiliser. J'ai des gros titres et des petites bulles ici. Je peux donc choisir si quelque chose est activé ou en préparation. Et j'ai aussi quelques petits nœuds adhésifs pour ajouter des commentaires. N'oubliez pas non plus que nous avons des ensembles de composants ici. J'ai maintenant organisé nos composants, nous les créons. Et j'ai ma barre arrière, ma barre supérieure, assez similaires, donc je peux les combiner en variantes Par exemple, si je les utilise dans mon design, vous pouvez voir ici que j'ai un petit menu déroulant à basculer entre eux. Tu n'es pas obligée de faire ça. Mais c'est bien si vous avez des articles similaires et que vous souhaitez les organiser comme nous en avons discuté lors de nos sessions précédentes. Au final, notre design est entièrement composé d'instances, à l'exception peut-être de quelques textes ici et là. Et n'oubliez pas que dans les cas où nous pouvions remplacer ancien remplissage d'image, nous ajoutions donc des images plus anciennes Et nous pouvons également faire de même avec le texte. Nous pouvons, par exemple, changer le nom des albums ici si vous voulez ces trois petits points ici. Si quelque chose est trop long, vous pouvez le faire. Revenons à nos composants. Vous pouvez le faire en sélectionnant le nom, puis en accédant aux extras. Et ici, vous trouvez le texte coupé par de petits points. N'oubliez pas que toute modification apportée à un composant, par exemple, inversons celui-ci ici, entraînera une modification de l'instance. 34. 01 Introduction aux variables: Présentation des variables. Une variable est le nom symbolique d'une donnée. C'est donc comme un espace réservé. Supposons que nous ayons une variable x, et que nous l'attribuons à la couleur rouge. Nous pouvons ensuite l'utiliser dans notre design. Dès que nous changeons notre variable x en bleu, donc que nous conservons le nom de la variable, mais que nous changeons la valeur de la variable, tout suivra dans notre conception. Nous utilisons toujours des composants. Nous avons nos composants, mais à l'intérieur et autour de ces composants, il y a beaucoup de choses comme les espacements, les différentes couleurs que nous allons utiliser Pour tout cela, nous allons utiliser des variables. Bref, les composants sont des objets réutilisables. Les variables sont des propriétés réutilisables que nous pouvons appliquer à ces objets. Tout cela semble encore un peu abstrait. Ne t'inquiète pas. Allons-y et essayons-le nous-mêmes, et cela deviendra beaucoup, beaucoup plus clair. 35. 02 Travailler avec les variables de couleur: Utilisation de variables de couleur. Dans notre design, nous avons généralement une palette de couleurs définie, et nous voulons nous assurer que tout dans notre design suit cette palette. Maintenant que je dessine ici, vous pouvez voir que j'utilise du rouge, mais certains tons de rouge sont un peu décalés. Ce que je pouvais faire, c'est que je pouvais maintenant sélectionner tous les différents éléments, utiliser mon sélecteur de couleur, puis me lancer et choisir la bonne couleur Cependant, cela serait assez fastidieux. À un moment donné, il se peut que je veuille aussi remplacer ce rouge par une autre couleur. C'est aussi pourquoi je n'appelle pas mes couleurs par leur nom, donc je ne les appelle pas orange, rouge et bleu. Je leur donne un nom sémantique, donc je peux toujours les modifier. Je les appelle donc primaires pour les couleurs de ma marque, et je leur donne un numéro. Cela me laisse suffisamment d' espace pour, par exemple, ajouter un autre ton entre le 20 et le 50, et j'ai quelques tons neutres. Ici aussi, je pourrais ajouter plus de tons de grade entre le 30 et le 90. Vous pouvez également leur donner un autre nom, par exemple, appel à l'action ou arrière-plan. Assurez-vous simplement que c'est sémantique. Maintenant, afin de réutiliser ces couleurs, définissons-les en tant que variables, que nous pouvons appliquer à notre design et à nos composants. Pour ouvrir vos variables, assurez-vous de cliquer sur la zone grise du canevas, puis sur le côté droit, vous pouvez voir les variables locales. Si vous cliquez sur l'icône, un mode s'ouvre. Pour créer une variable, cliquez sur Créer une variable , puis choisissez la couleur. Maintenant, je vais simplement l'appeler 120. Maintenant, je peux utiliser mon raccourci pour en créer d'autres. Je vais appuyer sur Shift et entrer, et je vais appeler le 150, je vais appuyer sur Shift et entrer à nouveau, et je vais prendre 80 points. Vous pouvez également utiliser le menu déroulant ici pour créer d'autres variables. Maintenant, pour ajouter une valeur, il suffit de cliquer sur ce champ ici, puis de choisir un sélecteur de couleur et de choisir votre valeur dans la feuille de style que vous avez configurée ou directement dans vos designs Créons également nos tons neutres. Je vais en prendre un autre avec 90. Ensuite, je vais utiliser à nouveau mon raccourci, et je vais utiliser 3010 et zéro Et maintenant je fais de même. Je vais simplement les sélectionner dans la feuille de style que j'ai déjà configurée. Si vous survolez votre variable, sur le côté droit, vous verrez le signe de variable ajoutée Vous pouvez cliquer sur cette petite icône ici Vous pouvez maintenant l'ajouter, ajouter des informations supplémentaires, et vous pouvez également la définir champ d'application signifie qu'il ne sera disponible pour certains champs. Génial. Maintenant que nous avons créé nos variables, appliquons-les maintenant. Je pouvais donc sélectionner n'importe quel élément, puis via le menu des fichiers, cliquer sur l'icône Styles. C'est quand même un peu étrange que nous utilisions l'icône Styles pour utiliser des variables. Je m'attends à ce que cela change à l'avenir. Pour l'instant, cliquez ici pour ouvrir nos bibliothèques Vous trouverez ici toutes les variables que vous avez configurées. Notez que les variables ont un s et que les styles ont un cercle. Nous pouvons cliquer dessus appliquer la variable de couleur. Maintenant, je pourrais le faire pour l'ensemble de mon design, ce qui, encore une fois, serait assez fastidieux N'oubliez pas que nous voulons travailler avec des composants, et vous pouvez voir que mon design est configuré en instances. Alors revenons ici. Réinitialisons ce remplissage et passons aux composants que j'ai utilisés pour créer ce design. Je place le dessin à côté de mon composant, afin que vous puissiez mieux le voir. Habituellement, vous l'avez sur une page personnelle ou même dans un fichier externe. Ce que nous voulons faire maintenant, c'est passer en revue tous nos composants et nous assurer que nos variables sont appliquées, car vous pouvez également voir que certaines d'entre elles, comme, par exemple, la date la plus haute de mon bouton n'est même pas visible dans mon design, mais je veux quand même donner les informations sur la bonne variable ici Vérifions-le, car ici nous pouvons voir que rien n'est actuellement appliqué. Maintenant, nous pouvons passer en revue ces composants un par un, afin que je puisse sélectionner l'arrière-plan ici, appliquer une variable, puis sélectionner le texte. Mais il existe en fait une très bonne façon de procéder. Il suffit donc de sélectionner tout cela, puis vous pouvez voir ici les couleurs de sélection. Maintenant, je peux voir ici que j' ai même appliqué un ancien style et que je veux utiliser mes variables. J'ai également appliqué un mélange de couleurs, vous pouvez donc voir que j'ai différents tons de rouge Je veux donc que tout cela soit aligné sur mes variables. Ce que nous allons faire, par exemple, c'est que si nous avons un vieux style, il suffit de détacher ce style Et maintenant, allons-y, petit à petit. Je vais donc choisir que celui-ci est blanc, puis je vais sélectionner une variable pour chacune de ces couleurs. Comme j'utilise la sélection, voici le plan de mon ensemble de composants. Je vais laisser celui-ci tranquille. Parce que j'utilise cette sélection, vais vraiment y trouver toutes les couleurs . Et c'est parti. Enfin, égalisons le rouge de notre petit marque-page Et maintenant, jetons un coup d'œil à notre design. Lorsque je sélectionne un élément dans mon design, vous pouvez voir que la variable a été appliquée. C'est ce petit carré, vous pouvez le voir dans la couleur comme dans le nom. Au fur et à mesure que je passe par ici, même si je descends jusqu'au nid le plus profond, vous pouvez constater que tout est correctement appliqué. Il se peut qu'il y ait des éléments sur mes cavas ici, par exemple ce texte qui n'en est pas un composant Ce que vous pouvez faire, c'est que vous pouvez également sélectionner ce cadre entier, puis vous pouvez voir les restes, et nous pouvons également les nettoyer. Si, à un moment donné, vous souhaitez modifier vos variables, suffit de cliquer sur l'arrière-plan du canevas, ouvrir les variables locales et de modifier la valeur de votre variable. L'ensemble de votre design suivra. 36. 03 Organiser avec des collections et des groupes variables: Organisation de vos variables, de votre collection et de vos regroupements. Il peut donc voir que j' ai toutes mes variables. Mais sur ma feuille de style, je les classe par catégories, donc j'ai le primaire, le secondaire et quelques neutres Maintenant, au lieu de les avoir tous sur une seule ligne, je veux ajouter un peu d'ordre, et je peux le faire en les regroupant. Pour regrouper vos variables, il vous suffit de les sélectionner, puis de maintenir la touche Maj enfoncée et de cliquer avec le bouton droit Vous obtenez alors un menu et vous pouvez choisir de les regrouper. Vous pouvez voir le groupe sur la gauche, double-cliquer dessus, puis lui donner un nom. Je vais donc l' appeler primaire. Si je veux voir à nouveau toutes mes variables, il me suffit de cliquer en haut. Je vais faire de même pour mon bleu. Je vais appeler celui-ci secondaire. Et je reviens en arrière pour tout voir, et je vais également le faire pour mes neutres. Sélectionnons-les tous en Shift et en cliquant avec le bouton droit de la souris, et maintenant nommons-les neutres. D'accord, il s'agit donc d'organiser ma collection elle-même, mais je peux aussi avoir plusieurs collections. Alors, qu'est-ce que cela signifie ? C'est une collection qui a toutes mes couleurs. En haut à gauche de votre mode variables, vous pouvez voir une petite liste déroulante. Si vous cliquez dessus , renommons d'abord cette collection et appelons-la couleurs de marque Maintenant, je veux ajouter une autre collection. Je vais cliquer sur Créer une collection. Dans cette collection, je souhaite enregistrer ma taille. Cela peut être l'espacement, la taille de certaines cartes ou éléments Je vais simplement appeler cela une taille unique. Je peux maintenant ajouter d'autres variables ici, et je vais utiliser des chiffres plutôt que des couleurs cette fois. Je peux, par exemple, configurer mon système d'espacement. Je pourrais dire que le plus petit espacement, qui est huit, s'appelle en fait un X S, puis je peux en créer un autre et je dois l'appeler S, et ce serait 16 Je pourrais également ajouter des chiffres correspondant à la largeur de ma carte, afin de pouvoir appeler cette carte et, par exemple, avoir une carte, disons 320. type de collections, leur nombre et la manière dont vous avez besoin dépendent uniquement de votre configuration et de votre projet. Habituellement, vous avez au moins besoin d'une collection de couleurs. Si vous souhaitez revenir à votre collection de couleurs, vous pouvez simplement aller dans le menu déroulant et revenir aux couleurs de votre marque, et vous pouvez la voir et la modifier ici. 37. 04 Variables de taille et d'espacement: Variables de taille. Nous pouvons également travailler avec des variables de taille dans Figma Pour les appliquer, il suffit de sélectionner un élément, puis dans le panneau des propriétés situé à droite, si vous survolez les champs, vous verrez apparaître un symbole variable partout où vous pouvez les appliquer. Nous pourrions donc ajouter notre variable pour une largeur et aussi pour des éléments tels que le rayon. Maintenant, si vous appliquez simplement ces tailles à n'importe quel design, vous remarquerez que cela ne fonctionne pas vraiment car le design ne répond pas. Donc, pour que cela fonctionne, vous devez configurer vos composants en tant que composant de mise en page. C'est quelque chose que nous allons faire ultérieurement. Alors que nous commençons à ajouter la mise en page automatique, vous remarquerez que c'est là la magie des variables et du dimensionnement opère Parce que maintenant, au fur et à mesure que nous appliquerons nos tailles, l'ensemble de la carte répondra. De plus, nous pouvons ajouter tout le rembourrage et les marges avec nos variables Cela signifie que lorsque nous définissons ce rembourrage et cette marge , puis que nous redimensionnons nos composants, tout restera en Mais plus à ce sujet dans un instant. 38. 05 Et qu'en est-il des styles ?: Alors, à quoi servent les styles dans Figma ? Vous avez peut-être remarqué que dans Figma, vous pouvez configurer des variables, mais vous pouvez également définir des styles Dans certains cas, comme par exemple pour les couleurs, il est presque identique de les créer et de les consommer. Il est donc assez difficile de comprendre pourquoi nous devrions utiliser l'un ou l'autre. Comprenons-le mieux. Nous utilisons des variables pour des valeurs uniques, comme une couleur ou une taille. Les styles, en revanche, nous servent à maintenir plusieurs valeurs ensemble. Considérez-les comme une classe CSS. Une variable peut également être un élément d'un style. Disons que j'ai créé une variable appelée taille variable S, et qui contient la valeur 24. J'ai créé un style appelé Headline Strong. Maintenant, mon style est composé de plusieurs valeurs. Pour n'en nommer que quelques-uns. Il peut s'agir de la police de caractères, la taille, de la hauteur de ligne et du poids Actuellement, je les règle tous manuellement. Je dis donc que la taille est définie comme 24. Ce que je pourrais aussi faire, c'est utiliser une variable ici. Je peux donc régler la taille sur la taille variable, qui pour le moment est également de 24, donc cela ne ferait aucune différence. Cependant, dans un système de design plus sophistiqué, cela s'avérerait très utile car j' aurais plusieurs textiles. Disons donc que j'ai le même titre mais une version souple, et que je pourrais utiliser la même variable Maintenant, si à un moment donné, je veux que la taille de tous ces titres change, me suffira de changer ma taille variable S et tout suivra. n'y a pas de bien ou de mal. Vous pouvez n'utiliser aucune variable ou aussi peu que vous le souhaitez dans vos styles ou les faire toutes varier autant que vous le souhaitez. Je vous recommande, si vous ne faites que commencer, rester simple, car sinon, cela pourrait être assez accablant. C'est vraiment quelque chose que vous utiliseriez dans un système de design plus sophistiqué. Les autres domaines de Figma, où nous utiliserions des styles, sont, par exemple, les effets Ainsi, n'importe quelle forme ou n'importe quel cadre dans un panneau de propriétés situé sur le côté droit, vous pouvez voir les effets, cliquer sur plus, puis choisir l'effet. Vous avez donc des éléments tels que la chute, l'ombre, le flou, etc. Vous pouvez également cliquer sur l'icône Little Sun ici et modifier n'importe laquelle de ces valeurs. Dans tous les styles, si vous survolez le champ de saisie, vous voyez apparaître le petit symbole de variable, cliquez dessus et vous pouvez le remplacer par n'importe quelle variable que vous avez créée au préalable Maintenant, dès que vous aimez votre effet, vous pouvez l'enregistrer en tant que style. Cliquez sur le symbole Style , puis sur le bouton Plus. Vous pouvez désormais donner un nom à votre style. Vous pouvez également ajouter une description, puis créer le style. Si vous cliquez sur la zone grise du canevas, vous verrez un aperçu des styles que vous avez actuellement enregistrés dans ce fichier. Sur n'importe quel autre objet, vous pouvez désormais simplement accéder au menu Effets, cliquer avec le bouton droit sur Styles, puis sélectionner le style et l'appliquer. Nous avons déjà rencontré des styles de grille. Pour rappel, vous pouvez appliquer une grille à votre mise en page. Cliquez sur l'icône pour la transformer en grille de mise en page. Dès que vous aimez votre grille, vous pouvez désormais l'enregistrer sous forme de style. Même procédure. Cliquez sur l'icône Styles, cliquez sur le bouton plus, nommez-le et enregistrez-le en tant que style. Si vous cliquez sur le fond gris de votre Canvas, vous pouvez voir tous vos styles dans votre fichier affiché ici. Vous pouvez également cliquer sur le champ ajouté pour les modifier. Donc, pour vous donner un aperçu de Figma actuellement, nous avons une chaîne de numéros de couleur et des variables booléennes Et puis pour les styles, nous avons les effets de grille, la typographie et les dégradés Et encore une fois, cela peut légèrement changer au fil du temps. Donc, si vous ne faites que commencer, vous pouvez simplement les utiliser isolément. Ainsi, par exemple, vous pouvez utiliser des variables pour les couleurs, mais vous pouvez simplement avoir des styles de typographie dans lesquels vous n'utilisez aucune variable Et cela fonctionnerait toujours bien. Mais au fur et à mesure que vous adaptez votre conception et devenez plus systématique, comme dans le cas d'une approche de système de conception. Vous remarquerez que vous souhaiterez peut-être utiliser des variables dans ces styles afin d' avoir des valeurs réutilisables. Vous n'aurez pas besoin de toutes les variables dans tous les styles. Par exemple, dans les grilles, vous n'avez probablement besoin que chiffres pour définir votre gouttière et vos marges, puis dans un dégradé, vous n'utiliserez probablement que des variables de couleur En typographie, vous allez voir davantage de combinaisons, par exemple des chiffres pour définir la taille et la hauteur de ligne Mais vous allez avoir une chaîne car c'est ainsi que vous définiriez la famille de polices. Si vous ne faites que commencer, je vous recommande de configurer vos variables de couleur. C'est vraiment un must, et vous devriez également avoir des styles de typographie. Plus tard, vous souhaiterez peut-être ajouter des variables numériques. Par exemple, si vous utilisez la mise en page automatique pour contrôler votre espacement, vous souhaiterez peut-être également utiliser certains styles de grille Vous pouvez bien sûr avoir des dégradés d' effets. Cela dépend de ce dont vous avez besoin pour votre design. Mais restez simples et je les garderais séparés pour le moment. Une fois que vous vous sentez à l'aise, vous pouvez toujours modifier vos styles , puis transformer toute valeur fixe en variables. 39. 06 Typographie et styles: Configuration des styles de texte. Pour créer un style de texte, sélectionnez un texte et le symbole de style s'affiche dans le menu de droite . Cliquez dessus. Cliquez sur plus, et vous pouvez maintenant nommer le style. Je vais juste appeler ce style de texte. Vous pouvez ajouter une description et créer votre style. Je peux maintenant sélectionner n'importe quel autre texte via le menu Styles. Je peux sélectionner l'un des styles que j'ai créés, et il sera appliqué. Si vous souhaitez modifier la couleur, celle-ci est distincte du style, il vous suffit de choisir n'importe quelle variable que vous avez configurée via le menu de remplissage. Si vous souhaitez détacher un style, suffit de sélectionner un texte, puis style vous suffit de sélectionner un texte, puis le symbole détaché se trouve juste à côté du nom du Si vous souhaitez supprimer un style, cliquez sur la zone grise du canevas où vous trouverez un aperçu de tous les styles. Vous pouvez modifier les styles ici, et vous pouvez également cliquer avec le bouton droit de la souris et supprimer le style. Si nous travaillons avec un A conçu avec des composants, je vous recommande toujours appliquer votre style à vos composants. Au lieu de choisir des textes au hasard et de les transformer en styles, il vaut mieux adopter une approche plus systématique. Personnellement, j' aime bien faire cela, c'est qu'une fois que je sais que j'aime mon design comme celui-ci, je vais l' affiner encore davantage, je retire une copie de tout le texte que j' utilise dans mon design. Ce sont peut-être mes composants. Si j'en ai déjà créé, c'est peut-être simplement à partir d'un design brut. Alors je choisis tout ce que j'ai utilisé, puis je le range dans l'ordre. Donc, de la plus grande, de la plus importante à la plus petite, et cela me permet de créer une hiérarchie. Je me retrouve donc avec quelque chose comme ça. De cette façon, j'ai une bonne vue d'ensemble. Je peux également combiner du texte assez similaire, et je peux le nettoyer pour des éléments tels que la hauteur de ligne. Je le nomme ensuite en conséquence. Peu importe les noms que vous utilisez. Assurez-vous simplement que vous disposez d'une configuration sémantique. J'aime bien le faire de cette façon, mais certaines personnes préfèrent d'abord créer une hiérarchie, puis l' utiliser dans leurs designs. Cela dépend de vous. Une fois que je suis satisfait de ma configuration, je peux maintenant commencer à l' enregistrer avec les prénoms. Donc, une fois que nous l'avons fait pour tous nos styles, cliquez sur la zone de fond gris, et vous pourrez tous les voir ici. Vous pouvez les organiser davantage en sélectionnant certains styles, puis cliquant avec le bouton droit de la souris ou en utilisant le raccourci Command NG, et vous pouvez créer un nouveau dossier, par exemple, pour tous vos titres. Donc, pour appliquer les styles à mes composants, je sélectionne simplement le texte, et d'ailleurs, si vous maintenez la touche Maj enfoncée, vous pouvez en sélectionner plusieurs à la fois, et maintenant, dans le menu déroulant, appliquer mes nouveaux styles. Je peux également corriger de petites inexactitudes. Par exemple, ici, je veux probablement une valeur par défaut forte. Une fois que j'ai fait cela pour l'ensemble de mon texte et tous les composants, si je passe à mon design, vous pouvez voir qu'ils héritent de mon composant, même s'ils sont remplacés, car cela ne concerne que le contenu, pas le style Tout changement de style se refléterait évidemment dans tous les composants et donc dans toutes les instances. 40. 07 Documentation des variables et des styles: Parlons un instant de la documentation du système à l'origine de notre conception Avec nos composants, nous avons besoin d'un composant comme maître auquel nos instances peuvent renvoyer. Nous devons donc stocker chaque composant quelque part, idéalement sur sa propre page ou dans son propre fichier avec quelques informations supplémentaires. Désormais, nos styles et variables ne pointent pas vers un style principal ou une variable. Nous n'aurions donc pas besoin de référence ou d'aperçu dans notre dossier. Cependant, je recommande vivement de créer une vue d'ensemble toute façon afin de permettre une compréhension complète et une documentation d'utilisation Ceci est utile, non seulement pour vous-même, mais également pour les autres concepteurs, et surtout pour les autres développeurs qui élaboreront ultérieurement votre design. Voyons donc comment documenter la couleur. Pour les couleurs, le moyen le plus simple consiste à ajouter un échantillon de votre couleur variable et à inclure le nom que vous lui avez attribué Nous voulons utiliser la dénomination sémantique, donc évitez les noms tels que l' orange, le rouge ou le bleu Utilisez plutôt des noms descriptifs, tels que principal, arrière-plan neutre ou tout autre nom similaire. Les chiffres situés derrière le nom sont là pour vous permettre d'ajouter d'autres variations de couleur. Par conséquent, je recommande d'utiliser des étapes de 100 ou des étapes de dix, car si vous optez pour un, deux trois et que vous souhaitez ajouter quelque chose entre les deux plus tard, vous n'avez pas d'espace. Je recommande d'ajouter une couche supplémentaire et de créer des variables distinctes pour les couleurs de votre texte, même si cette couleur est déjà représentée dans les tons neutres. Cela permet de garder plus facilement un contrôle global et de s'assurer que le contraste est correct. Vous pouvez aller encore plus loin et vérifier ces couleurs contrastent correctement avec les couleurs de votre marque. Vous pouvez utiliser un outil en ligne tel que Web Aim, ou vous pouvez utiliser n'importe quel plugin dans Figma, Stark ou autre pour cela Espacement. Maintenant, j' aimerais aussi ajouter quelques informations sur l'espacement que j'utilise, mais cela ne nécessite pas beaucoup de documentation Dans la plupart des cas, vous utiliserez un système d'espacement multiple de quatre ou huit Huit est un chiffre magique dans la conception Web pour diverses raisons, notamment en évitant les demi-pixels. Par exemple, si vous utilisez cinq pour le réduire, cela devient 2,5, ce qui n'est pas idéal. Un système d'espacement vous évite également beaucoup de discussions avec les développeurs, car si vous êtes à un pixel de distance ici et là, ils sauront à quoi l' arrondir vers le haut ou vers le bas J'inclus généralement une simple fiche d'information sur le système d'espacement à huit points dans mes feuilles de style, ainsi qu'un exemple de son utilisation J'aime également configurer les variables en conséquence. Remarque. Dans la conception de sites Web, nous n'utilisons pas ce que l' on appelle la grille rigide. grille rigide signifie qu'il y aurait une grille de pixels en arrière-plan sur laquelle s'aligner. n'est pas ce que nous faisons. Nous utilisons ce que l'on appelle une grille souple. Cela signifie que notre système d'espacement fonctionne toujours d'un élément à l'autre et également au sein, par exemple, de nos composants J'applique le même principe à la typographie. J'inclus une feuille de style générale pour ma typographie en mettant l'accent sur l'affichage de la hiérarchie Vous pouvez créer une hiérarchie de manière aléatoire ou utiliser un système tel qu'un ratio. Il existe d'excellents outils en ligne à cette fin. Vous pouvez également simplement passer à l'étape huit, ce qui fonctionne parfaitement avec votre système d'espacement Pour chacun des styles, je fournis des informations supplémentaires telles que la phase de saisie, la hauteur de la ligne, le poids, etc. Je préfère présenter ces informations sous forme de graphique, mais elles peuvent également être consultées directement en mode design de Figmus ou en mode sourd Vous pouvez donc choisir de ne même pas les ajouter Encore une fois, je recommande d'utiliser une approche de dénomination sémantique n'y a pas de règles strictes, mais évitez de donner le nom du style exact. N'utilisez donc pas quelque chose comme Poppins 24 en gras. Optez plutôt pour des noms tels que titre 03 ou titre S. Si vous concevez pour une page réactive, vous devrez peut-être ajuster taille du texte à des points de rupture donnés, et vous devez également ajouter ces informations à votre Il s'agit d'un sujet plus avancé, et j'ai un cours de plongée complet à ce sujet. J'ai quelques exemples gratuits de différentes échelles de types réactives sur ma page communautaire Figma à télécharger Tous les styles supplémentaires que vous pourriez utiliser, tels que les dégradés ou les ombres Assurez-vous simplement d'ajouter également une page contenant les informations à votre documentation. Vous pouvez stocker ces informations relatives à vos styles et variables sur une page séparée votre fichier ou y dédier un fichier distinct et l' utiliser comme bibliothèque externe. En général, la documentation va du plus simple au plus détaillé et avancé En fin de compte, l' important est de communiquer le système que vous utilisez de manière à ce qu'il soit adapté à votre équipe, à vos ressources et à votre budget. Commencez donc modestement et vous pourrez toujours ajouter et améliorer votre documentation. 41. Variables de couleur 3: Si vous n'êtes pas à l'aise avec les variables et les styles, ajoutons-les à notre projet de cours. Les variables changent encore beaucoup. se peut donc que vous voyiez dans votre fichier d'exercices une configuration différente de celle que je montre à l'écran. J'essaie toujours de maintenir le fichier d'exercices à jour. Assurez-vous donc également de récupérer la dernière version. Ce que nous voulons faire, c'est commencer par créer nos variables de couleur. J'ai déjà sélectionné toutes les couleurs de notre projet pour vous dans ces échantillons, et il ne nous reste plus qu'à les configurer sur le côté droit Si vous cliquez sur le canevas, vous voyez des variables locales ici, vous pouvez ouvrir les variables de couleur que j'ai déjà créées pour vous. Si vous ne les voyez pas, c'est qu'il y a un petit interrupteur. Il se peut que certaines couleurs auxiliaires soient également configurées. Assurez-vous que vous êtes sur la couleur dans la collection , puis vous pourrez voir les différentes couleurs pour les appliquer. N'oubliez pas que nous pouvons simplement remplir n'importe quoi. Et puis via le remplissage, on clique sur les Petits styles. Comme je l'ai dit, je m'attends à ce que cela change un peu à l'avenir. Ensuite, nous pouvons sélectionner n'importe laquelle des variables que nous avons configurées. N'oubliez pas que nous avons créé nos composants dans un fichier séparé, et que nous voulons faire de même avec nos variantes de couleurs, car sinon nous serions simplement en conflit avec celles que j'ai déjà créées pour vous dans ce fichier avec une solution. Passons au fichier dans lequel nous avons configuré notre design. Et n'oubliez pas que nos composants se trouvent sur une page séparée. Passons simplement à la page de nos composants et collons notre jeu de couleurs ici. Nous pouvons dessiner une section autour celui-ci et également l'organiser bien. Appelons cette couleur. Vous pouvez également modifier la couleur de n'importe quelle section. Je vais plutôt prendre ce blanc. Peu importe ce que vous utilisez, c'est juste pour une meilleure visibilité. Maintenant, je veux créer mes variables et je clique sur les variables locales et rien n'est encore créé. Et je clique sur la variable de couleur. Maintenant, je peux simplement sélectionner le nom que je lui ai donné. Encore une fois, vous pouvez lui donner n'importe quel nom, essayez simplement d'être sémantique Sélectionnez maintenant le Swatch. Et avec le sélecteur, je choisis la couleur de mon set. Petit raccourci. Appuyez sur Shift et entrez. De cette façon, vous pouvez créer rapidement plusieurs variables, puis les renseigner. Je vais le faire pour toi. Voici mes variables. J'aime bien ajouter des variables séparées. Quatre textes, vous n'êtes pas obligé, vous pouvez également les utiliser, mais je vais ajouter une autre variable de couleur que j' appelle text on dark primary. Ce sera en fait exactement la même couleur qu'ici. Ce ne sera qu'un simple blanc. Mais j'aime bien le garder séparé au cas où je voudrais changer quelque chose plus tard. Je peux également vérifier si le contraste est suffisamment fort. Ici, vous pouvez voir que je donne cette gamme, ce qui signifie que vous pouvez utiliser cette couleur sur tous ces tons neutres. Et je l'ai vérifié au préalable. Je vais en créer un deuxième que je vais appeler texte au secondaire. C'est aussi, encore une fois, l'un de mes points neutres en ce moment, mais cela pourrait changer de cette façon à l'avenir Je l'ai bien garnie et séparée. Il y a encore une petite chose, vous pouvez sélectionner les couleurs. En fait, nous allons juste l'agrandir un peu. Ensuite, si vous survolez la couleur, vous pouvez voir ce petit champ d'édition Et ici, vous pourriez dire que vous souhaitez que cette variable ne soit visible que lorsque vous sélectionnez du texte. Je ne vais pas le faire pour le moment parce que c'est un peu avancé, mais sachez simplement que c'est là. Encore une fois, les variables changent rapidement, peuvent donc être placées ailleurs, mais elles seront sûrement trouvées dans le champ d'édition. Maintenant que nous avons créé nos variables, nous voulons les appliquer et surtout, nous ne voulons pas les appliquer ici. Nous ne voulons pas les ajouter dans notre design. Nous pourrions les ajouter dans notre design. Mais il est beaucoup plus logique d'accéder à nos composants et de les appliquer à nos composants , car toutes nos instances hériteront, ce qui pourrait être négatif maintenant Mais si vous avez des centaines d'écrans, cela fait une énorme différence. Il est en fait beaucoup plus rapide de les appliquer à vos composants. Ce que je fais, c'est sélectionner tous ces composants. Et puis avec la couleur de sélection ici, je vais simplement les sélectionner rapidement et les changer en, euh, mes couleurs variables. Je vais faire de même ici, et je peux maintenant sélectionner cette option. Attention, je travaille avec des couleurs distinctes pour mon texte. Si je le fais, je devrai toujours sélectionner le texte séparément. Ensuite, je passe simplement de celui-ci à la couleur de mon texte. Si c'est un peu trop avancé, si c'est un peu écrasant, alors allez-y petit à petit. Sélectionnez celui-ci et appliquez une couleur. Sélectionnez ensuite le suivant et appliquez le suivant. Cela dépend vraiment de vous. Si c'est trop accablant, il suffit de prendre du recul. Mais pour l'instant, je vais suivre le chemin le plus rapide. Je vais laisser le dégradé tranquille. est très important, et je vais juste suivre cette voie. C'est également très pratique si vous concevez , que vous avez des couleurs similaires et que vous faites le ménage. Ensuite, vous pouvez simplement les combiner ici et vous assurer que tout est bien réglé avec vos variables. Ce n'est que si je l'ai fait à nouveau que je dois m'assurer que mon texte est défini dans la variable de texte. Une fois que j'ai terminé, je vais simplement choisir le texte. Je vais changer ce texte ici en texte sur le primaire. Il faudrait en fait en créer un autre, pour celui-ci ici à long terme, un texte noir, et pour celui-ci. Mais pour l'instant, je vais juste les laisser tranquilles. Est-ce que j'ai pris celui-ci ? Laisse-moi y jeter un œil. Voici le texte sur le secondaire. Vous pouvez voir que c'est comme le gris. Si nous sélectionnons maintenant l'une de nos instances, sélectionnons ce texte ici, par exemple. Ensuite, vous pouvez voir que la variable est automatiquement appliquée. Nous n'avons pas à nous soucier du design. Il y a encore certains éléments, comme par exemple les couleurs de fond, que je devrai peut-être régler. J'ai l'habitude de passer par ceci puis, par exemple, ce remplissage, je voudrais m' aligner sur mes variables. Je voudrais nettoyer un peu ce texte, par exemple. Une autre bonne façon de le faire est de sélectionner ce cadre. Et puis ici, vous pouvez voir les couleurs inutilisées. Si je clique sur cette petite cible, elle me dira laquelle n' utilise pas de variables ou laquelle utilise cette couleur. Je peux simplement les changer comme ça. Bien entendu, toute modification de la variable, changeons notre surlignage , par exemple en rouge, entraînera une modification de l' ensemble du design. 42. Styles de texte de la partie 3: Maintenant, outre les variables de couleur, nous voulons également transformer notre texte en styles. Encore une fois, il s'agit actuellement de styles. Espérons que Figma nous fournira bientôt des variables pour cela également. Et je vais mettre à jour que j'utilise ma méthode de sélection dont j'ai parlé pendant les cours. Encore une fois, je veux juste insister fait que vous devez d' abord suivre toutes les séances avant de vous lancer dans ces exercices. Sinon, ils seront très accablants. façon dont ils fonctionnent à nouveau, actualisons-le, c'est que je retire simplement tout ce que j' utilise dans mon design. À partir de là, je dois juste le copier. Copiez et collez. Je suis en train de créer ces petites hiérarchies. J'utilise également ici mon petit texte. De cette façon, je les regroupe. Si nous revenons à votre fichier d'exercices, vous pouvez le voir. Que j'ai tout cela ici et que je l'ai regroupé. Et vous pouvez le voir ici, j'ai trouvé des titres de 24 pixels, puis 16 corps de texte, etc., et un tout petit ici. Maintenant, si vous concevez librement, vous pouvez avoir quelque chose où vous avez un 32, 34, et c'est aussi le moment où vous pouvez tous les regrouper. Ce ne sera pas toujours aussi clair. Il vous faudra probablement un peu de nettoyage si vous vous intéressez davantage à un projet plus créatif. Une fois que je les ai regroupés, j'ai créé le titre un, titre deux, le titre trois, etc., ainsi que quelques corps de texte Et j'ai cette balance. Et je veux maintenant en faire des styles. Et vous pouvez voir si vous cliquez sur le fond gris. J'ai déjà créé ces styles dans vos fichiers d'exercices, afin qu'ils soient prêts à être utilisés. Je pourrais simplement cliquer ici, puis accéder à la section des styles et sélectionner l'un de ces styles. Nous voulons maintenant créer ces mêmes styles dans vos fichiers séparés. Nous allons donc faire de même avec nos composants et nos couleurs. Nous allons entrer ici dans le fichier séparé que vous avez créé, et nous allons ajouter nos styles ici. Encore une fois, nous pouvons ajouter une section autour de celui-ci pour que tout soit bien organisé, pour qu'il soit également blanc pour une meilleure visibilité. Maintenant, je vais y aller un par un, en enregistrant ces styles. Je vais choisir celui-ci ici et je vais cliquer sur le bouton de style et je vais appeler celui-ci titre un titre. Je peux ajouter plus d'informations là où elles sont utilisées et je peux créer ce style. Maintenant, je fais la même chose qu' avec mes variables de couleur auparavant. Je ne vais pas appliquer ce style ici. Figma me laisserait le faire. Et c'est un peu dangereux. Nous ne voulons pas que cela figure dans notre design. C'est ce que nous voulons intégrer à nos composants. Tout suit donc dans notre design. Pour mon titre, je commencerais par là. Je sélectionnerais tout ce qui est un titre, puis je choisirais le titre. Je créerais ensuite mon titre. Deuxièmement, je préfère d'abord créer tous les styles, puis passer en revue petit à petit tous mes composants pour m'assurer que tout est configuré. Si vous passez à votre design et que vous cliquez sur le titre ici, nous obtiendrons un meilleur prix. Il n'a pas hérité Si je clique sur le titre ici, il hérite de ce qui se passe parfois si nous collons du texte, même si nous ne parfois si nous collons du texte, le voulions pas, nous remplacions accidentellement un style Dans ce cas, nous devons sélectionner notre instance, puis la réinitialiser à l'endroit où les trois petits points réinitialisent toutes les modifications. Malheureusement, cela réinitialise également les remplacements J'ai juste besoin de remettre ce texte ici. Maintenant, si je sélectionne, vous pouvez voir qu'il a maintenant le bon style. 43. 01 Qu'est-ce que la mise en page automatique ?: Alors, ayons une idée, qu'est-ce que mise en page automatique et à quoi l'utilisons-nous ? Grâce à la mise en page automatique, nous pouvons configurer nos designs dans Figma manière à ce qu'ils correspondent à l'évolution de la taille Cela fonctionnera sur des éléments tels que des composants individuels, mais également sur des groupes de ces composants. Cela signifie que nous pouvons vraiment utiliser la mise en page automatique pour configurer n'importe quoi, d'un bouton à une page entière. Vous remarquerez que parfois, lorsque vous appliquez la mise en page automatique, cela fonctionne très bien et c'est super facile. Cependant, à d'autres moments, il se comportera simplement de la manière la plus étrange, et vous devez comprendre pourquoi Cela est dû au fait que la mise en page automatique n'est pas simplement un bouton sur lequel vous cliquez. Il est composé de trois piliers et vous devez comprendre chacun d'eux en profondeur. Le premier concerne la mise en page et le positionnement, le second le comportement de redimensionnement et le troisième l'imbrication Nous allons comprendre chacun de ces piliers plus en détail, puis les rassembler dans leur ensemble, afin que vous puissiez configurer n'importe quoi avec la mise en page automatique en toute confiance . 44. 02 Mettre en page des cadres de mise en page automatique: Voyons comment configurer un cadre de mise en page automatique. Grâce à la mise en page automatique, nos éléments de conception peuvent répondre à leur contenu. Voilà, j'ai un bouton. Sans mise en page automatique, vous pouvez voir que si je change le contenu, rien ne s'adaptera. Maintenant, si j'ajoute une mise en page automatique, ce que je peux simplement faire en sélectionnant ce bouton, puis sur le côté droit du panneau des propriétés, sur la mise en page, je clique sur le bouton de mise en page automatique. Si je change maintenant le texte, vous pouvez voir qu' il s'adapte automatiquement au contenu qui m'est donné. Faisons de même pour ma carte. J'ai sélectionné. J'ai ajouté la mise en page automatique, et maintenant je l'ai convertie en un cadre de mise en page automatique. Et vous pouvez maintenant voir que si je change quelque chose au contenu, tout s'adaptera, tout en conservant tout son rembourrage Maintenant, ce rembourrage et cet espacement, si vous sélectionnez à nouveau le cadre de mise en page automatique, vous pouvez le voir dans le panneau des propriétés de droite Donc, dans le menu ici, vous pouvez voir que vous obtenez d'abord ce que l'on appelle l' écart entre les éléments. Ce sont donc tous les articles pour enfants. Les articles de mon enfant ici seraient donc mon image, mon titre et mon texte Remettons celui-ci dans son état d'origine. Donc, si je changeais cela, vous verrez que cela modifie l'écart entre ces éléments. Si vous maintenez la touche Shift enfoncée, votre montant n augmentera et diminuera. Vous pouvez également ajuster n'importe quoi directement sur les cavas, ou vous pouvez double-cliquer puis saisir la valeur que vous recherchez Cela fonctionne de la même manière pour votre rembourrage. Vous avez ici votre rembourrage horizontal et votre rembourrage vertical. Vous pouvez modifier cela ici. Dans votre panneau de propriétés, vous pouvez également simplement saisir le nombre que vous recherchez, et vous pouvez également l'ajuster sur le Canvas en utilisant les poignées ou en double-cliquant simplement pour ajouter une valeur. Avec le menu d'alignement, vous pouvez désormais aligner vos éléments dans votre cadre de mise en page automatique. Réduisons simplement cette image pour que vous puissiez mieux la voir. Vous pouvez tout aligner vers la droite, tout vers le centre ou tout vers la gauche. Cela permet d'aligner l'ensemble de la zone de texte, et non le texte lui-même. Si vous souhaitez aligner le texte, vous devez toujours utiliser les paramètres des propriétés du texte. La mise en page est vraiment bonne deviner la direction dans laquelle vous concevez Mais si jamais vous voulez le modifier, vous pouvez utiliser ces erreurs ici pour passer de la verticale à l'horizontale. Le RAP est quelque chose que nous utiliserions si nous avions plus d'éléments de mise en page automatique, donc des éléments imbriqués les uns à côté des autres Ce n'est rien dont tu as besoin pour le moment au début. Vous pouvez déplacer des éléments dans ou vers mise en page en les faisant simplement glisser ou en utilisant les touches d'erreur de votre clavier pour les déplacer vers le haut ou vers le bas. Vous verrez que dans le panneau des couches, elles changeront de position en fonction de l'endroit où vous les placez. Vous pouvez également supprimer la fonction de mise en page automatique à tout moment suffit de sélectionner le cadre, puis de cliquer à nouveau sur le bouton de mise en page automatique. Il ne vous restera qu' un simple cadre. Outre le panneau des propriétés, vous pouvez également utiliser les raccourcis Shift et A pour créer un cadre de mise en page automatique, et tout Shift et A pour le supprimer, ou vous pouvez simplement utiliser le clic droit de la souris. Le raccourci est très pratique. Si, par exemple, vous n'avez que du texte, vous ne verrez pas l'option de mise en page automatique dans le panneau des vous ne verrez pas propriétés, mais vous pouvez appuyer sur Shift et A. Cela le transformera en cadre de mise en page automatique. Donc, si nous ajoutons un peu de remplissage, vous pouvez voir qu' un cadre a été ajouté autour de votre texte. Si vous désactivez la mise en page automatique, vous pouvez voir que vous êtes reparti avec un cadre et votre texte à l'intérieur. C'est aussi pourquoi on l'appelle cadres de mise en page automatique, car cela ne fonctionne qu'avec un cadre. Donc, si vous l' appliquez comme un simple texte, un groupe, il le convertira toujours en cadre pour vous. 45. 03 Composants et variables de mise en page automatique: Si vous utilisez des variables et que vous configurez une collection avec vos valeurs d'espacement, vous pouvez les utiliser dans la mise en page automatique C'est un excellent moyen d'assurer la cohérence entre les différents éléments et composants de votre conception. Pour les appliquer à un cadre de mise en page automatique, sélectionnez simplement le cadre, puis dans votre menu de mise en page automatique, vous trouverez vos valeurs de remplissage et d'espacement Si vous les survolez, un petit signe variable apparaît Cliquez dessus et vous obtiendrez une liste déroulante avec toutes les valeurs. Vous pouvez maintenant choisir la valeur ci-dessous. Vous pouvez également l'utiliser pour votre espacement. Il vous suffit d'appliquer la variable via le menu déroulant, et vous pouvez désormais choisir n'importe quelle variable que vous souhaitez appliquer. Et vous pouvez bien sûr appliquer la même variable plusieurs fois sur différents éléments. Vous pouvez toujours modifier la variable simplement en cliquant dessus et en choisissant une autre valeur dans la liste ou en la détachant en cliquant sur le petit clip Si vous ne voyez pas ce clip dans certains champs, appuyez deux fois sur la touche de retour. Et n'oubliez pas que dans la fiction, nous travaillons avec une approche basée sur les composants Il serait donc recommandé de transformer tout cadre de mise en page automatique utilisé plusieurs fois en un composant Si nous extrayons maintenant une instance, vous pouvez constater qu'elle héritera de toutes les valeurs d'espacement que vous avez appliquées aux variables Lorsque je modifie le texte dans l'instance, ces variables resteront en place. Et bien sûr, comme pour tout autre composant, cela fonctionnerait également avec n'importe quelle autre variable. Ainsi, par exemple, si vous définissez une variable de couleur pour votre composant, toutes les instances héritent 46. 04 Paramètres de redimensionnement: Redimensionnement avec mise en page automatique. Nous avons donc appris que nous pouvons simplement transformer n'importe quel élément en un cadre de mise en page automatique. Nous pouvons ajuster l'espacement, le dimensionnement et le rembourrage, et lorsque nous modifions le contenu, nous pouvons voir que notre Maintenant, cela fonctionne très bien comme ça car si on y regarde à nouveau, agit d'un cadre de mise en page automatique vertical. Mais ce que nous voulons également ce cadre fasse, c'est que si nous le redimensionnons, nous voulons que notre contenu réponde également de cette Pour que cela fonctionne, nous devons ajouter une couche supplémentaire de mise en page automatique, appelée paramètres de redimensionnement Vous trouverez le paramètre de redimensionnement en haut de la zone de mise en page. Si vous avez appliqué la mise en page automatique, cela peut être dans le cadre parent ou dans le cadre imbriqué, alors vous pouvez le trouver ici Mais aussi tout élément à l'intérieur d'un cadre de mise en page automatique. Si vous cliquez dessus, vous obtiendrez la zone de mise en page avec les paramètres de redimensionnement de cet élément, et c'est la partie qui nous intéresse Il est donc très important de comprendre que lorsque nous appliquons la mise en page automatique au cadre parent, le menu de mise en page automatique détermine le comportement de tous les éléments enfants de ce cadre. Donc, l'alignement de tous ces éléments, l'espacement de tous ces éléments Maintenant, si nous voulons définir comportement individuel de ces éléments, nous devons les sélectionner et définir leur comportement de redimensionnement, et non le comportement de redimensionnement de l'ensemble du cadre Les options que nous avons actuellement sont une taille fixe, le remplissage du contenant ou le contenu. Auto Layout est devenu très efficace deviner le comportement que vous pourriez souhaiter Vous pourriez donc vous en tirer comme ça. Par exemple, cette image est déjà configurée pour remplir le conteneur. Et cela est dû au fait que la mise en page automatique a détecté une marge similaire à gauche et à droite. Mais je vous recommande vivement de ne pas vous fier à ces préréglages et essayer vraiment de comprendre une fois comment configurer un redimensionnement approprié Le redimensionnement est généralement la partie où les gens sont le plus confus au sujet de la mise en page automatique, mais ce n'est pas si difficile Il s'agit vraiment de le comprendre une fois et de le pratiquer un peu. L'essentiel est d'y aller étape par étape. Tu ne peux pas précipiter les choses. Alors allez-y petit à petit. La première chose que nous allons sélectionner est notre image. Passons maintenant à notre menu déroulant, et configurons-le pour remplir le conteneur. Cela signifie que si nous redimensionnons le contenant, il va, comme il est indiqué, le remplir, respectant toujours le rembourrage que nous avons indiqué à gauche et Ici, nous avons affaire à une configuration horizontale, donc je ne m'inquiète pas trop pour la configuration verticale. Je vais quand même avoir celui-ci ici à une hauteur fixe. Cela signifie que mon image est toujours fixée à cette hauteur spécifique. Je vais maintenant passer à l'élément suivant, qui est mon texte, et je veux faire de même. Je ne veux pas que cela soit corrigé à la taille. Je veux que ce soit à l'horizontale pour remplir le récipient. Et je vais faire de même pour mon texte de copie. Je veux aussi que cela remplisse le récipient. Maintenant, en ce qui concerne le texte, je ne veux pas fixer la hauteur car je ne sais pas quelle sera la hauteur si j'ajoute du texte ou si je le redimensionne C'est pourquoi je veux que ce soit un câlin. Le câlin est une petite fonctionnalité vraiment mignonne. En gros, considérez cela comme un câlin au contenu vertical. Lorsque vous copiez du texte dans une mise en page automatique, et par là, je veux dire tout ce qui n'est pas un bouton ou un lien, assurez-vous qu'il est toujours réglé sur la hauteur automatique. Habituellement, la mise en page automatique le fait toute seule. Et c'est déjà à peu près tout. Redimensionnons maintenant notre boîte, et vous verrez que tout se déroule bien Et même si je change de texte. Ajoutons donc un peu plus de texte ici. vous pouvez le constater, car il est réglé sur la hauteur automatique et Hug la boîte s'agrandit automatiquement et la disposition automatique répond. Je peux toujours modifier des éléments tels que mon espacement et mon dimensionnement avec le menu de mise en page automatique Mais si je redimensionne, tout se comportera comme prévu La fonction de mise en page automatique de Figma est assez intelligente. Donc, si, par exemple, j' ai un bouton ici, que je veux ajouter, et que je le transforme en mise en page automatique, alors vous pouvez voir qu'il prend non seulement automatiquement tout l'espacement, mais qu'il me donne déjà un paramètre de redimensionnement suggéré Maintenant, dans un bouton, Hug Horizontal et Hug verticalement a du sens, parce que si je change cela, disons que je le change pour en savoir plus, alors vous pouvez voir que je veux que ce soit également étreint horizontalement Et d'ailleurs, je peux aussi faire glisser un cadre de mise en page automatique dans un autre. bouton sera imbriqué et conservera ses paramètres de redimensionnement Si nous voulions le déplacer, nous pourrions utiliser l'alignement. Et nous pourrions également modifier ses paramètres de redimensionnement. Par exemple, si nous voulions un bouton en taille réelle, nous pourrions le modifier pour remplir le conteneur et il se trouverait au milieu. Notez que si votre texte est collé à gauche, cela est probablement dû au fait que l'alignement du bouton est toujours réglé sur la gauche et que vous pouvez le modifier au centre. 47. 05 Le réglage automatique: Il y a une fonctionnalité un peu cachée, mais je l'utilise tout le temps. Je veux que tu le saches, et ça s'appelle auto. Cette fonctionnalité était auparavant appelée space between dans Figma et est toujours appelée ainsi dans Flexbox Vous pourriez donc également entendre ce nom être mentionné Donc, en gros, nous avons ici notre cadre avec trois éléments enfants. Et si je redimensionne, vous pouvez voir que je peux aligner maintenant qu'il est au milieu, je peux l' aligner vers la gauche, mais il gardera toujours un espacement Maintenant, dans l'espacement avec le menu déroulant, je peux passer en mode Auto Avec Auto, l'espace est réparti de manière égale entre les enfants. Outre le menu déroulant, vous pouvez également simplement cliquer sur les poignées. Maintenant, si vous tapez une valeur, elle reviendra au réglage d'origine. Ou si vous double-cliquez à nouveau et que vous tapez « auto », cela passera à l'espace entre les deux, ou comme nous l'appelons « now auto ». Mon raccourci préféré, il suffit de cliquer sur le menu d'alignement pour basculer entre le format compressé et l'espace entre les deux, ou vous pouvez également utiliser le raccourci x dans le menu d'alignement L'automatique est vraiment très pratique lorsque nous voulons créer des éléments comme une navigation dans laquelle nous voulons placer certains éléments sur la gauche et en coller d'autres sur la droite. Maintenant, ce qui est génial, c'est que si nous ajoutons plus d'éléments, cela dépend de l'endroit où nous les ajoutons. Maintenant, ce serait un enfant direct. Nous avons donc maintenant trois éléments secondaires. Donc, si nous redimensionnons, l'espace disponible est réparti entre trois Mais si je le place dans mon cadre imbriqué ici, je reviens à mon réglage d'origine plupart du temps, Auto sera exactement la solution que vous recherchiez . Alors gardez-le à l'esprit. 48. 06 Apprendre à propos de l'imbrication et de la relation parent-enfant: Comprenons la nidification et la relation parent-enfant. afin de comprendre l'imbrication dans la mise en page automatique, ailleurs, afin de comprendre l'imbrication dans la mise en page automatique, ainsi que dans le code, il est important de comprendre la relation parent-enfant Ici, vous pouvez voir un dessin de carte que j'ai configuré. Maintenant, aucune mise en page automatique n'est appliquée jusqu'à présent. Vous pouvez voir que cette carte contient des clusters. Ce piège va de pair, puis nous avons un texte et un lien qui vont de pair Maintenant, si je sélectionnais cette carte et appliquais simplement la mise en page automatique, cela se produirait. Ce qui s'est passé, c'est que la mise en page automatique a ajouté le même espacement entre tous les éléments La raison en est que mise en page automatique le voit comme ceci. Notre cadre est l'élément parent, puis tout ce qu'il trouve juste en dessous de la première couche de hiérarchie correspond aux enfants. Toutes les règles de mise en page automatique sont appliquées à tous ces enfants. Dans ce cas, notre espacement. Maintenant, si nous allons de l'avant et que nous l' imbriquons, j'ai maintenant un cadre imbriqué à mise en page automatique ici, et j'ai également imbriqué cette partie Ensuite, la mise en page automatique va regarder le design comme ceci. Nous avons le cadre d'exemple d'imbrication qui est toujours le parent, mais nous n'avons plus que trois éléments enfants Maintenant, si nous changeons notre espacement , par exemple, cela n' affectera que les enfants Nous avons toujours toutes nos couches, mais ce sont des petits-enfants maintenant. Ils vont suivre les règles de leurs propres parents. En fonction de la façon dont vous souhaitez que votre conception change et se comporte, vous devez ajuster cette imbrication. Supposons, par exemple, que vous souhaitiez une image pleine largeur. Ce que nous devons faire, c'est nous débarrasser de notre rembourrage des deux côtés Cependant, ce que nous voulons également , c'est conserver une certaine marge de manœuvre à cet égard. Ce que nous pouvons faire maintenant, c'est sélectionner ces deux options, créer une autre mise en page automatique imbriquée et appliquer à nouveau les marges à gauche et à droite Si nous voulons nous débarrasser du haut, nous pouvons également le faire, le mettre à zéro. Vous pouvez maintenant voir que vous avez une mise en page complètement différente, qui a également besoin de ses propres rôles d'imbrication C'est pourquoi il est si important se familiariser avec la nidification, et c'est juste une question de pratique La mise en page automatique ne consiste donc pas simplement à appliquer ce petit bouton ici. Il s'agit de réfléchir à la structure générale de votre conception, puis d'appliquer des cadres de mise en page automatiques là où vous en avez besoin. Et très important, tous ces cadres de mise en page automatique que vous avez imbriqués, ainsi que toutes les couches qu'ils contiennent, vous devez réfléchir soigneusement au comportement de redimensionnement que vous souhaitez qu'ils aient Il s'agit vraiment de comprendre et combiner les trois piliers de la mise en page automatique. 49. 07 Suggérer la mise en page automatique: Ajoutons un peu de magie qui suggère la mise en page automatique. Voici quelques modèles qui auraient besoin d'être imbriqués si je veux les transformer en mise en page automatique La première est assez simple, donc cette partie serait une mise en page automatique imbriquée, puis cette partie, et ensuite tout cela serait une mise en page automatique verticale La deuxième carte est un peu plus complexe. Cette partie droite devrait être une imbrication automatique verticale, puis la carte elle-même une imbrication automatique horizontale Et puis nous avons une navigation, donc cette partie droite devrait être imbriquée. Et entre le logo et cette partie imbriquée à droite, nous devrions définir le réglage automatique, également connu sous le nom d'espace entre les deux Maintenant, nous pouvons faire tout cela à la main ou nous pouvons utiliser une petite astuce. Commençons par le premier. Si je sélectionnais simplement un cadre, appliquais une mise en page automatique, cela arriverait, pas bien. De plus, si nous regardons le second, nous avons certainement besoin d'un peu de nidification ici Mais ce que nous pouvons faire, c'est cliquer avec le bouton droit de la souris, puis vous verrez sous Ajouter une mise en page automatique, une autre option appelée Suggérer une mise en page automatique. Nous pouvons également utiliser les raccourcis Shift Control et A. Ainsi, dans le panneau des calques, vous pouvez voir que la mise en page automatique suggère une imbrication pour nous Maintenant, il suffit d'appeler ce cadre pour que nous puissions ajouter un petit conseil supplémentaire, qui consiste à cliquer sur le menu AI et à renommer vos couches Et puis vous allez également obtenir de jolis noms de couches pour ces éléments imbriqués Voyons maintenant si cela fonctionne, et cela semble plutôt bien si je redimensionne ici Si nous cliquons ici, nous pouvons voir que cela a également ajouté notre redimensionnement Ceci est configuré pour être rempli, et mon parent ici est également configuré pour le remplir. Si jamais je souhaite changer cela, je peux simplement supprimer ou faire glisser ces éléments dans mon panneau de couches et modifier mon imbrication Essayons la suivante et sélectionnons cette carte, commande Shift et A. Je vais utiliser le raccourci. Je vais également renommer les couches. Allons y jeter un œil. Cela a également l'air plutôt sympa. Je peux toujours faire des ajustements. Supposons que je souhaite cette image occupe la moitié du contenant, puis je peux simplement la sélectionner et modifier mon redimensionnement pour remplir le conteneur Comme ça, je l'ai ajusté à la façon dont je veux qu'il se comporte. Notre dernier point, jetons un coup d'œil à la navigation. Shift, control et A, notre raccourci, et prenons également l' habitude de renommer les couches Cela va renommer tout ce que je n'ai pas nommé auparavant Ceux que j'ai déjà nommés ne vont pas le remplacer Voyons si cela s' applique automatiquement tout seul. Oui. Parfaitement, nous pouvons voir que dans le menu d'alignement ici, cette automatique a été appliquée. C'était vraiment quelque chose de très difficile à faire avant d'avoir cette petite fonctionnalité. Fais-en usage. Cependant, je vous encourage vivement à prendre également l'habitude de comprendre l'imbrication manuelle, car à un moment donné, vous voulez changer les choses et vous devez comprendre pourquoi les choses sont configurées d'une certaine façon Remarque : au moment de l'enregistrement de cette fonctionnalité, est assez nouvelle et compte tenu de sa puissance et elle est assez nouvelle et compte tenu de sa puissance et de son importance, je m'attends à ce qu'elle soit bientôt supprimée de ce petit sous-menu consistant à cliquer avec le bouton droit de la souris sur notre menu principal de mise en page automatique de ce petit sous-menu consistant à cliquer avec le bouton droit de la souris sur notre menu principal de mise en page automatique, attention. 50. 08 Ignorer la mise en page automatique: Ignorer la mise en page automatique. Qu'est-ce que cela signifie ? J'ai donc ici un cadre de mise en page automatique. Je veux faire glisser ce nouvel autocollant ici, et je veux qu'il soit placé au-dessus de mon image. Maintenant, si je le fais simplement glisser dans le cadre de mise en page automatique, vous remarquerez que je ne peux pas le faire glisser au-dessus de l'image car il fait partie du cadre de mise en page automatique dès qu'il entre dans le cadre. Donc, ce que je peux faire maintenant, c'est le placer dans le cadre, le sélectionner, puis dans le panneau des propriétés, sous position, vous trouverez cette petite icône appelée ignorer la mise en page automatique. Dans les versions précédentes, cela s' appelait la position absolue. Vous pouvez désormais faire glisser librement votre élément dans le cadre de mise en page automatique. Petit conseil, il existe également un raccourci, maintenez la touche Ctrl et faites-le simplement glisser dans un cadre de mise en page automatique, puis vous devrez ignorer la mise en page automatique automatiquement appliquée. Si vous souhaitez l'enlever, il suffit de cliquer à nouveau sur l'icône. Cependant, au fur et à mesure que j'ai redimensionné la carte, vous remarquerez qu'elle ne répond plus à la largeur. Cela est dû au fait que cela ne fait plus partie de la mise en page automatique. Par conséquent, le redimensionnement ne s'applique pas. Ce que je peux faire pour résoudre ce problème, c'est que je peux sélectionner l'élément dans une position suivante le menu de recherche des contraintes, et je peux le coller à droite. Cela ne fonctionne que pour les éléments qui ne sont pas mis en page automatiquement. C'est également idéal pour créer des éléments tels que des bulles d'alerte. Il suffit de le faire glisser dans votre cadre de mise en page automatique, d' ignorer la mise en page automatique, puis de le positionner où vous le souhaitez. Maintenant, par défaut, cela va probablement le couper. Assurez-vous de sélectionner le cadre parent et, dans le menu de mise en page automatique, passez du contenu du clip à l'affichage du contenu. Cela signifie qu' il va montrer tout ce qui dépasse votre cadre. 51. 12 AUTO LAYOUT : 09 Images à format fixe: Configurez maintenant le ratio d' image Aspec avec Figma. Ici, j'ai une carte de mise en page automatique avec une image. suffit maintenant de sélectionner l'élément auquel vous souhaitez appliquer le rapport hauteur/largeur. D'ailleurs, cela fonctionne également pour les cadres. Et puis, juste à côté de vos tailles vous voyez ce petit cadenas. Cliquez dessus. Et si vous redimensionnez maintenant, vous pouvez voir que l'image conserve bien le rapport d'aspect Un petit inconvénient, si vous passez mode sourd à ce moment-là, mais gardez à l'esprit que ce qui vient d'être publié, c'est la traduction que nous voyons Ce que nous aimerions idéalement avoir c'est le ratio d'aspèces tel que nous le voyons en CSS, mais il n'en est qu'à ses débuts 52. 09 Pages de mise en page automatique: Nous pouvons également utiliser l'imbrication pour configurer des pages complètes de mise en page automatique Dans mon exemple, j'ai un ensemble de composants avec deux variantes, l'une pour les mobiles et l'autre pour les grands écrans. Ici, j'ai une instance de ce composant, et vous pouvez voir qu'il est déjà configuré avec la mise en page automatique. Et j'ai un composant de carte, qui est également configuré avec une mise en page automatique. Sur le côté droit, vous pouvez voir que j'ai un ensemble d'instances et j'ai déjà ajouté du contenu, des images et des titres ici. Nous voulons maintenant créer un cadre qui contient tout cela. Appuyons sur F. Nous obtenons notre menu cadre, et je vais simplement choisir une taille d'iPhone au hasard. Je peux maintenant ajouter mes instances à ce cadre, et comme elles sont toutes déjà configurées avec la mise en page automatique, je n'ai pas à me soucier des détails. Je peux maintenant opter pour la mise en page plus grande. Maintenant, je pourrais ajouter mes cartes une par une, mais je vais plutôt les sélectionner toutes. Je vais appuyer sur Shift et A. Maintenant, j'ai créé un cadre de mise en page automatique ici et je vais appeler ce groupe de cartes. Je peux maintenant mettre de l'ordre dans ce groupe. Par exemple, ajoutons un peu d'espacement. Ce que je peux faire maintenant, c'est l' ajouter à l'intérieur de mon cadre. N'oubliez pas que nous pouvons sélectionner le cadre parent, puis avec le contenu du clip, nous pouvons voir l'intégralité du contenu débordant Zoomons un peu ici pour mieux voir cela. Et ce que je veux faire, c'est peut-être remanier un peu Je peux le faire en montant et en descendant avec les touches fléchées. Maintenant, j'ai ma mise en page générale, et ce que je veux faire maintenant, c'est ajouter le redimensionnement pour qu'il se comporte avec mon cadre Par conséquent, je dois également transformer ce cadre parent en cadre de mise en page automatique. Il définit automatiquement le cadre parent sur fixe et fixe, et c'est très bien parce que j'ai affaire à cette taille fixe prédéfinie. Ce que nous allons faire maintenant, c'est faire la même chose que lorsque nous avons configuré nos éléments tels que la navigation et les voitures. Nous allons le parcourir petit à petit pour configurer les paramètres de redimensionnement. Nous n'avons pas à nous soucier des voitures et la navigation elle-même, car cela est déjà configuré dans le composant. Je vais donc prendre cette instance dans son ensemble, et je vais dire, veuillez remplir le conteneur dans son intégralité . Voyons donc si cela fonctionne déjà. OK, c'est super. Maintenant, nous allons aller chercher nos cartes. Encore une fois, je peux d'abord prendre le groupe de parents, donc le groupe de cartes, et je peux maintenant dire « remplir le conteneur ». Maintenant, mes cartes de ce groupe ne savent toujours pas comment se comporter. Si je sélectionne l'un d'entre eux, vous pouvez voir qu'ils sont toujours corrigés. Sélectionnons-les tous. Utilisons notre raccourci pour sélectionner un groupe de cartes, appuyer sur Entrée et sélectionner tous les éléments enfants en même temps. Maintenant, je vais dire remplir le conteneur et saisir le contenu en hauteur parce que je ne sais pas comment cela va être redimensionné. C'est génial. Mais je veux du rembourrage à gauche et à droite. Maintenant, j'ai déjà le rembourrage à l'intérieur de ma navigation, car cela fait naturellement partie de la navigation Donc, avec mes cartes, je peux simplement les ajouter à mon groupe de cartes Je sélectionne donc mon groupe de cartes, puis je vais ajouter du rembourrage J'utilise mes variables. Vous pouvez également ajouter un numéro ici à gauche et à droite. Maintenant, tout est redimensionné correctement. Si vous utilisez des écrans mobiles, je vous recommande d'utiliser le menu prédéfini, car vous obtiendrez ainsi une représentation plus précise des différentes tailles d'écran. Cela fonctionne donc bien, mais je pourrais ajouter quelques tailles supplémentaires. Appuyons donc à nouveau sur F, et disons que je souhaite également avoir une version de bureau. Je vais donc copier une instance de ma navigation. Et je peux soit copier cette instance directement à partir d'ici, soit utiliser la petite version et simplement la modifier dans la fenêtre des propriétés de mon composant. Donc, pour l'instant, avant d'ajouter la mise en page automatique, ajoutons-le simplement à la main. Et vous pouvez voir que cela est également déjà configuré avec la mise en page automatique, nous n'avons donc pas à nous soucier ce composant ou de cette instance elle-même. Je souhaite ajouter mes cartes. Je peux soit le configurer à partir de zéro, soit simplement les copier depuis ma version mobile. Si je les ajustais simplement à la taille de l'écran, cela se produirait. Maintenant, c'est parce que la mise en page automatique est définie sur une mise en page verticale. Mais pour cette mise en page, il faudrait la changer en horizontale. Il se peut que vous trouviez le changement un peu confus au début. Travaillez donc à partir de zéro. Je souhaite ajuster la marge et le rembourrage. Vous pouvez donc voir ici que dans ma navigation, j'ai un rembourrage gauche et droit de 48 Sélectionnons donc également mon groupe de cartes et définissons également le rembourrage sur la variable de 48 Nous pouvons également régler la hauteur de notre groupe de cartes pour qu'il corresponde au contenu, afin qu'il soit toujours aussi haut que les cartes. Et nous pouvons maintenant transformer l'ensemble de l'écran en écran de mise en page automatique, et ainsi, nous pouvons également utiliser des variables pour ajuster l'espace entre les deux. Vous pouvez choisir entre utiliser des variables ou simplement taper ces chiffres. Maintenant, comme nous avons déjà défini le comportement de redimensionnement ici et que nous l'avons copié, il restera le même Il est donc configuré pour remplir, est configuré pour remplir, et tous les éléments enfants sont également définis pour être remplis Donc, si je redimensionne le parent, vous pouvez voir que tout se redimensionne bien avec lui Un petit conseil supplémentaire un peu plus avancé. Vous pouvez sélectionner votre composant , puis via le menu déroulant de largeur, vous pouvez choisir une largeur minimale et maximale. Maintenant, si je définis une largeur minimale, disons simplement que je la règle à 260 pixels au hasard pour le moment. Ensuite, vous pouvez voir que si je retire un instant, je ne peux pas le réduire au montant fixé. Ce qui est génial, c'est que je peux maintenant sélectionner cette ligne entière et la configurer pour qu'elle soit terminée. Avant de faire cela, examinons le comportement normal, donc ça s'arrêterait là. Si nous le définissions sur Wrap, ce qu'il ferait maintenant, c' est qu'il serait désormais enroulé dans une nouvelle ligne. D'ailleurs, vous ne pouvez pas contrôler quand votre navigation, par exemple, serait trop petite. Donc, le moment est venu de passer à l' autre version. C'est vraiment quelque chose que vous devez tester à la main dans Figma et documenter Comme vous pouvez le constater, il est très important de configurer d'abord vos composants assurer qu' ils sont réactifs. Et une fois que tout est en ordre avec vos composants, vous pouvez les modifier et transformer vos pages en pages réactives. Si tu le veux, tu n'as rien à faire. 53. 10 Quelles sont les limites dans Figma ?: Contraintes dans Figma. Dans Figma, nous avons une autre fonctionnalité qui nous permet de contrôler le comportement lors du redimensionnement, appelée contraintes Sélectionnez n'importe quel élément à l'intérieur d'un cadre Il doit s'agir d'un simple cadre, et non d'un cadre de mise en page automatique. À présent, vous verrez des lignes pointillées bleues qui pointent vers le cadre parent suivant Telles sont les contraintes. Vous pouvez également les voir dans le menu de droite sous contraintes. Toutefois, uniquement sur les cadres standard, ils ne sont pas disponibles sur les cadres de mise en page automatique. Par défaut, ces contraintes sont définies sur le haut et sur la gauche. Et remarquez que même lorsque vous avez des cadres imbriqués, ils sont toujours redirigés vers le parent le plus récent. Donc, si nous redimensionnons, il semble que rien ne se passe car ils sont placés à gauche et en haut Cependant, si nous modifions ces contraintes, par exemple, définissons-les à gauche, à droite, dans cette case, puis sur ce point rouge, je vais les placer en bas et à droite. Remarquez comment ils changent et ils vous indiquent de quel côté ils sont épinglés Mettons celui-ci au centre Vous pouvez utiliser les menus déroulants ou simplement utiliser l'icône et cliquer sur les différentes directions Au fur et à mesure que nous les épinglons dans leur nouvelle direction et que nous les redimensionnons, vous pouvez voir que cela change leur comportement , et nous pouvons les définir horizontalement ou verticalement. donc très évident de les épingler d'un côté semble donc très évident de les épingler d'un côté ou en bas Mais parfois, nous sommes un peu confus lorsque nous parlons de centre, que l'on appelle la gauche-droite et d'échelle. La différence entre eux est que fixe a simplement une marge gauche et droite fixe. Où que vous l' ayez placée, elle gardera cette distance, l'échelle a une marge en pourcentage par rapport à l'endroit où vous l'avez placée, et le centre reste simplement au centre relatif. Et la même chose fonctionne évidemment horizontalement et verticalement. Petite astuce, il arrive parfois que vous souhaitiez simplement redimensionner le cadre parent et ignorer les contraintes Dans ce cas, maintenez la touche Commande enfoncée, et elle ignorera simplement les contraintes pendant que vous la maintenez enfoncée. 54. 11 Limites et grilles: Contraintes et grilles. Au lieu de tout configurer avec la mise en page automatique, nous pourrions simplement configurer notre composant tant que composants de mise en page automatique. Ensuite, nous pourrions utiliser la gauche et la droite pour les épingler à gauche et à droite, et nous faisons de même ici. Nous pouvons même ajouter des éléments comme cette petite bulle ici et la placer en bas et à droite. Maintenant, si nous redimensionnons, nous obtenons à peu près le même résultat, mais c'est beaucoup plus facile que de configurer un cadre de mise en page automatique Cependant, vous remarquerez que même si cela fonctionne très bien pour les configurations mobiles simples avec un seul élément, dès que vous ajoutez d'autres éléments, cela ne fonctionnera tout simplement pas Parce que le problème ici, c'est que si nous utilisons la gauche à droite, nous allons parcourir toute la distance. Il n'est pas au courant de ces autres éléments. Ce que nous pourrions faire, c'est les sélectionner toutes et les adapter à l'échelle. Mais avec cela, cela fonctionnerait, mais nous ne garderions pas une distance fixe. Nous ne pouvions donc pas vraiment aligner notre rembourrage sur, par exemple, notre navigation Un excellent moyen de résoudre ce problème est d'ajouter une grille. Parce que regardez, si j'ajoute mes contraintes de gauche et de droite dans une grille , elle va maintenant regarder la colonne la plus proche, car elle prend les colonnes comme parents. Par conséquent, ce qui se passerait maintenant si nous sélectionnions toutes ces cartes et les mettions toutes à gauche et à droite, c'est qu'elles resteraient dans les toutes à gauche et à droite, c'est qu'elles colonnes qui leur ont été désignées lors du redimensionnement Maintenant, nous pouvons faire de même pour notre navigation ici. Réglons-le à gauche et à droite. Vous pouvez constater qu'en quelques clics et avec très peu de complications, nous obtenons une configuration réactive et nous pouvons tester notre design. Maintenant, c'est très pratique pour un simple test rapide, cela fonctionne également très bien, si, par exemple, vous travaillez avec des nombres impairs. Supposons que vous ne vouliez pas tout répartir uniformément. Cela ne fonctionnerait pas également avec la mise en page, mais cela fonctionne très bien avec une grille. Cependant, cela présente également des inconvénients, car la grille ne respecte aucun rembourrage vertical, elle ne connaît donc pas la distance entre ici et ici Si vous ajoutez d'autres éléments, tels que du texte, les choses commencent à s'enchaîner. Mais c'est purement un problème de Figma. Ce ne sera pas un problème de code plus tard. J'aime donc toujours utiliser des grilles pour des tests rapides. Cela ne remplace toutefois pas la mise en page automatique. Vos composants doivent toujours être configurés avec une mise en page automatique, mais il est parfois beaucoup plus rapide de les tester rapidement à l'aide d'une grille et de contraintes. Petit conseil, vous pouvez également toujours activer ou désactiver la grille Utilisez le panneau des propriétés situé sur le côté droit et cliquez simplement sur l'icône, ou vous pouvez également utiliser les raccourcis Ctrl et G. Si vous désactivez la grille, toutes les contraintes resteront en place 55. Partie 4 Responsive: Dès que vous serez à l'aise avec la mise en page automatique et les contraintes, passons à notre projet de cours. N'oubliez pas qu'il n'y a aucune nouvelle information là-dedans. Il s'agit simplement d'une pratique supplémentaire pour approfondir votre compréhension de ce sujet. Dans la quatrième partie réactive, vous trouverez quelques instructions ainsi que des exemples où la réactivité réelle réside toutefois dans les composants Si nous passons à la page de nos composants, puis à chacun de ces composants où cela a du sens. Par exemple, pas pour mes icônes, elles n'ont pas besoin de mise en page automatique, mais tout ce qui est redimensionné a du contenu qui est remanié J'ai ajouté la mise en page automatique et vous pouvez cliquer sur ces composants et vous assurer que vous ouvrez les couches. Vous pouvez donc voir ici comment j'ai tout imbriqué. Ensuite, sur le côté droit, dans le panneau des propriétés, vous pouvez voir les paramètres de mise en page automatique et, sans oublier les paramètres de redimensionnement, ouvrez vraiment ces couches pour voir où tout est imbriqué La nidification est vraiment importante pour bien faire les choses. Et n'oubliez pas que le design réactif est la partie la plus difficile de Figma Soyez donc très indulgent avec vous-même et utilisez simplement ces composants que j'ai configurés pour vous comme référence C'est une partie que nous ajoutons à certains des composants là où nous en avons besoin. Par exemple, mes icônes n'auraient pas besoin d'une mise en page automatique, sont que des icônes standard. Ensuite, il y a une autre partie. Donc, si nous passons directement à notre conception, toutes nos instances ici hériteront Vous pouvez donc voir sur le côté droit qu'il contient tous les paramètres d'avant. Et vous pouvez également voir qu'à l'intérieur d'ici, dans le panneau des couches, cela a la même imbrication. Tout cela est un héritage. Je n'ai pas besoin de l'ajouter à chaque fois que j'utilise ce composant ou une instance de celui-ci. Cependant, lorsque je le place dans un nouveau design, je dois maintenant lui dire comment se comporter par rapport à ce nouvel environnement dans lequel il est placé. Vous pouvez le faire de plusieurs manières. Vous pouvez configurer l' ensemble du cadre avec mise en page automatique ou utiliser des contraintes, ce que j'utilise car je trouve cela un peu plus facile à gérer et cela me donne encore plus de flexibilité dans la conception. Par exemple, vous pouvez voir que cette instance possède des contraintes définies sur gauche, droite et haut. Et vous pouvez, par exemple, voir que la barre de touches ci-dessous est à gauche, à droite et en bas. Si je sélectionne maintenant l'écran puis que j'utilise ma liste déroulante, je peux maintenant essayer toutes les tailles de téléphones actuels J'essaie donc généralement le plus petit. Ce n'est pas une taille courante, mais il se peut qu'elle existe toujours. Je m'assure donc que tout est toujours en place, puis j'utilise le plus gros. Et je peux juste passer entre les deux et m' assurer que mon design convient à toutes les tailles. Bien entendu, vous pouvez également le saisir et le redimensionner à la main Cependant, je trouve qu'il est un peu plus fiable d'utiliser cette liste déroulante ici avec des tailles réelles. Laissez-moi maintenant vous guider un peu lorsque vous vous lancerez dans cet exercice, car vous devrez l'ajouter aux composants que vous avez créés dans vos fichiers séparés auxquels aucune mise en page automatique n'est toujours appliquée. Si vous ne l'avez pas configuré, vous pouvez revenir aux exercices et simplement récupérer les composants suggérés que j'ai créés pour vous dans le deuxième exercice. Vous devez maintenant le copier dans un nouveau fichier, les transformer tous en composants Vous devez également vous assurer que vous imbriquez à nouveau ces icônes, ou vous imbriquez à nouveau ces icônes, pouvez simplement vous en débarrasser et oublier l'imbrication pendant une minute et vous concentrer sur la mise en page automatique Ce serait également très bien. Vous pouvez ensuite configurer votre conception avec ces composants. Si c'est un peu rapide, revenez à cette session. Revenez à la deuxième partie de notre projet de cours, où nous parlons des composants. Maintenant, si vous avez suivi toutes les différentes étapes du projet de cours, c'est quelque chose que vous devriez avoir dès maintenant. Votre conception est probablement configurée ici et vous avez également vos composants, et votre conception est composée d'instances de ces composants. Cependant, à l'heure actuelle, aucune contrainte n'est encore appliquée. Passons d'abord à nos composants et vérifions-nous qu'ils se comportent correctement. Nous commençons par le tout début. Je n'ai pas besoin d'y ajouter une mise en page automatique, telle qu'elle existe. Très bien. Maintenant, notre barre de touches est là, je dois ajouter une mise en page automatique. J'ai déjà configuré cette barre de touches dans laquelle chacune de ces icônes possède son propre cadre. Cela me facilite la tâche. Je peux simplement appliquer la mise en page automatique. J'applique la mise en page automatique à ce cadre. Je l'applique à ce cadre et je l'applique à ce cadre. Je peux maintenant appliquer la mise en page automatique à l'ensemble de la barre. Il ne me reste plus qu'à appuyer sur Entrée. De cette façon, je sélectionne tous les éléments enfants imbriqués en même temps et je peux maintenant les configurer pour remplir le conteneur Ils vont juste occuper l'espace disponible divisé par trois. Voyons si cela fonctionne. Je vais donc simplement extraire une instance et je vais la redimensionner Ça. Ça a l'air fantastique. C'était ça. OK, prochaine étape, nos barres supérieures ici. Vous pourriez en fait argumenter et dire, eh bien, je vais juste laisser cela avec des contraintes et cela fonctionnerait. Cela fonctionnerait, mais dès que j'aurai un redimensionnement correct, j'aime bien que tout soit uniforme Il faut également que toutes ces distances soient correctes ici avec la mise en page automatique. Je vais donc ajouter une mise en page automatique à cela. Je vais le ramener à la taille normale. Je pense que j'ai tout à 390. En fait, cela n'aurait pas d'importance, car il est réactif maintenant, mais j'aime bien l' avoir tout de même. Maintenant, je fais simplement le ménage pour que vous puissiez voir ici cela fonctionne déjà bien J'ai la gauche et la droite, je vais juste m'aligner au centre, donc je dois aller en bas à gauche et à droite, un bel espacement Voyons si cela fonctionne. Oui, c'est très bien. Je vais faire de même avec celui-ci ici. Je vais également appliquer une mise en page. Vous pouvez voir par exemple ici que l' espacement est un peu décalé. Je vais aussi en faire 390. Encore une fois, cela peut être de n'importe quelle taille, il est réactif. Maintenant, je vais mettre ça de l'ordre et aussi l'avoir à 16 ans. De cette façon, les deux sont identiques avec tous les espacements. OK, super, allons-y. Nos éléments de design dans la couverture de ma playlist. En fait, je vais laisser ça et je vais utiliser les contraintes ici. Même si je viens de le dire, je préfère tout avoir avec mise en page automatique. Je trouve que ce serait un peu difficile de commencer. Cela fonctionnerait toujours avec la mise en page automatique. Vous pouvez le sélectionner, vous pouvez ajouter une mise en page automatique. Ensuite, vous devrez sélectionner ce dégradé ici. Vous devez le positionner de manière absolue, ramener dedans, vous pouvez voir qu'il fonctionne toujours. Mais ça devient un peu délicat. Revenons ici. Ce que je vais faire, c'est simplement le définir ici, donc la superposition devrait en fait s'appeler gradient Le dégradé que je vais régler à gauche, droite, et l'image que je vais également définir à gauche, à droite. Je vais en fait faire de même pour le haut et le bas. Cela signifie qu'ils seront toujours correctement dimensionnés. Maintenant que ce petit est là, je dois absolument ajouter une mise en page automatique ici. Nous devons d'abord imbriquer, car que se passerait-il si nous appliquions simplement la mise en page automatique ? Cela ferait quelque chose comme ça. Ce n'est pas ce que nous voulons, nous devons nicher. Je veux vraiment que ces deux-là aient leur propre distance. Je les sélectionne, j'appuie sur Shift et A, puis je sélectionne Shift et A. Et maintenant je peux appliquer la mise en page automatique à l'ensemble du cadre. D'accord ? N'oubliez donc pas que nous suivons nos trois étapes. Nous pensons d'abord à l'imbrication, puis nous ajoutons la mise en page automatique, puis nous procédons au redimensionnement Nous devons maintenant ajouter le comportement de redimensionnement. Je vais commencer par ce bouton ici. C'est bien comme ça en fait. Non, définissons que cela doit également être un élément de mise en page automatique. Ajoutons ce câlin. C'est parfait Maintenant, celui-ci est là, je veux remplir le récipient. Je veux remplir le récipient. Ensuite, ce récipient, je veux aussi le remplir. Et celui-ci, je le laisse réglé. Essayons ça. Extrayons simplement une instance pour nous assurer qu'elle fonctionne. Non, en fait, ce n'est pas le cas. Celui-ci, nous l'avions oublié, doit également remplir le récipient. Ajoutons simplement du texte et voyons ce qui se passe. On voit qu'il y a une petite erreur. OK, trouvons cette erreur. Remplissez le récipient, cela remplit également le récipient. C'est-à-dire, allons-y petit à petit. Cela est dit pour remplir, cela est toujours dit à k. Ici, nous avons le problème, remplir le récipient. Vous pouvez voir si vous faites ce petit test ici, alors c'est vraiment utile. Une autre chose que je ferais probablement, c'est de centrer tout cela. Ce serait donc quelque chose comme ça. OK, fantastique, ça marche aussi maintenant. Vous pouvez voir ici dans votre fichier d'exercices que c' est en fait l' exemple que j'utilise. Vous pouvez donc voir que nous pensons d'abord au nid de nidification, puis au réglage de la disposition automatique Vous pouvez voir une position, tout ce qui se trouve en bas, c'est à vous de décider. Et puis j'applique le composant ici à la toute fin. Peu importe le moment où vous le transformez en composant. Vous pouvez également jouer avec ces exemples ici. Revenons en arrière, notre couverture. Notre couverture. Je fais la même chose qu'ici. Je laisse juste que c'est important. Il suffit de toujours saisir tous les éléments à l'intérieur et s' assurer qu'ils ont tous une sorte de réglage. Vous pouvez placer les images directement sur le cadre. J'utilise cette petite forme simplement parce que cela me permet copier et coller des images plus rapidement. Mais une forme, c'est bien, ou un cadre, c'est bien. Cela dépend vraiment de vous. Cette carte est là. C'est en fait très simple, car il ne contient que deux éléments secondaires que nous pouvons appliquer directement à la mise en page, pas besoin de plus d'imbrication La seule chose que je vais faire, c'est définir ce texte pour remplir le conteneur. Essayons-le également. Copions un peu plus de texte. Et vous pouvez voir, oui, en fait, il y a des petits points. Je ne veux pas que ça passe au rang suivant. N'oubliez pas que si vous le souhaitez, c'est dans le petit menu supplémentaire des propriétés de votre texte, puis vous le trouverez ici. Prochaine étape. Celui-ci a également besoin d'un peu de nidification D'ailleurs, il se peut que vous rencontriez légères différences entre ce que je vous montre ici et configuration finale dans le fichier d'exercices. Vous pouvez modifier cela de plusieurs manières , mais cela devrait être similaire L'important est de sortir une instance, sécher et de s' assurer qu'elle fonctionne. Ici, nous avons tout d'abord besoin d'un peu d'imbrication, alors prenons les deux, shift et huit, pour créer un cadre de mise en page automatique Maintenant, ajoutons également la mise en page automatique au parent et veillons à ce que tout soit bien rangé Je veux donc que ce soit 16 également. Maintenant, si nous extrayons une instance, vous pouvez voir qu'elle ne se comporte pas encore comme nous le souhaitons. Donc, ce que je veux faire, c'est prendre cette partie centrale et je dis « remplir le récipient ». Et maintenant, cela va occuper tout l'espace disponible. Et en gros, il va appuyer ce petit bouton vers la droite, et il restera toujours sur la gauche. Cependant, assurez-vous toujours de tester également avec plus de contenu. Vous pouvez donc voir que ce que nous avons oublié maintenant, c'est de définir les enfants intérieurs, alors j'appuie sur Entrée, j'obtiens tous les éléments de l'enfant. Vous pouvez également les choisir un par un et je les configure pour qu'ils remplissent le récipient. Et celui-ci est là aussi pour remplir le conteneur. Donc, si vous retirez une instance et jouez un peu avec le contenu, vous pouvez toujours obtenir un très bon résultat. Une idée de ce qui se passe d'ailleurs, pour éviter ce genre de choses, comme si cela devient trop petit, le trop-plein, ce n'est pas une mise en page automatique, c'est simplement le contenu du clip de notre vieil ami Il suffit de parcourir vous-même le reste des composants. Donc, juste ces deux-là pour terminer. N'oubliez pas que nous allons d'abord nicher, puis ajouter une disposition automatique, puis redimensionner les trois saints Une fois que tu en auras fini, je l'ai fait pour toi. Revenons ensuite à notre design. Vous pouvez voir si nous cliquons simplement sur l'un d'eux, alors vous pouvez voir qu'ils ont tous hérité de ces paramètres. Il ne nous reste plus qu'à ajouter notre comportement de redimensionnement ici. J'y vais petit à petit. Je sélectionne celui-ci à gauche, à droite et en haut. Alors celui-ci est là. En fait, permettez-moi d'activer ma grille parce que je veux la positionner avec la grille. N'oubliez pas que les contraintes se comportent avec la grille. Je vais également le régler à gauche et à droite. Ensuite, voici mon texte pour vous assurer qu'il correspond toute la largeur de la grille à gauche et à droite. J'ai déjà joué avec ça. Apparemment, il est également réglé à gauche et à droite. Maintenant ceux-ci sont là, je dois les sélectionner. Et maintenant, je vais cliquer avec le bouton droit de la souris et encadrer la sélection parce que je le souhaite. Sinon, il collerait au sable en arrière-plan et essaierait de se réorganiser Maintenant, c'est comme un élément que je peux positionner à gauche et à droite. Je vais faire de même avec celui-ci ici. Je vais sélectionner les cadres à gauche et à droite. Évidemment, ma barre inférieure est à gauche et à droite, et je veux qu'elle soit collée en bas. Essayons, et comme toujours, il s'agit simplement d'essayer et de réparer des choses. Si cela ne fonctionne pas comme vous le souhaitez, soyons plutôt prometteurs. Jetons un coup d' œil à notre petit. Et ça a l'air bien aussi. Parfait Revenons à notre taille standard. Il suffit de passer en revue cela petit à petit. Sélectionnez donc tout cela ici, petit conseil, toute cette superposition Vous devez vous assurer qu' il est collé en bas. Si vous redimensionnez, si vous voulez avoir un pic épais, passez simplement à notre fichier d'exercices Dans le design final, vous pouvez voir mes créations. Et il vous suffit de cliquer ici. Et vous pouvez voir la façon dont j'ai configuré les contraintes pour les différentes instances. Et oui, ça va être un peu comme travailler avec du chewing-gum au début, mais croyez-moi, vous allez y arriver Cela deviendra plus facile au fur et à mesure que vous le ferez. 56. 01 Le prototype d'espace de travail de Figma: Commençons donc par quelques notions de base concernant l'espace de travail en matière de prototypage Nous avons donc ici quelques configurations de conception, certaines pour mobile et d'autres pour ordinateur de bureau, et par défaut, nous allons être dans l'onglet de conception À côté de l'onglet Design, vous trouverez le robinet de prototypage Vous pouvez également utiliser le raccourci pour basculer entre les anciennes options ou les options huit et neuf Nous allons donc découvrir ce menu plus en détail ici. Pour l'instant, notez simplement que si vous cliquez sur le canevas gris, vous définissez les paramètres généraux du prototype. Donc, tout appareil que vous souhaitez configurer, saurai plus à ce sujet plus tard, et si vous souhaitez modifier l'arrière-plan, cela se trouvera dans la vue de présentation, que nous allons examiner dans une minute. Cependant, si vous sélectionnez un cadre sur votre Canvas, vous verrez que le menu de prototypage change ici, et c'est là que nous allons travailler la plupart du temps Dans notre dossier de conception, c'est ici que nous allons configurer le design et tout le comportement de notre prototype. Si nous voulons voir notre prototype en action, nous devons appuyer sur le petit bouton de lecture en haut à droite de votre fichier. Cela passe ensuite en mode présentation ou en mode aperçu. Vous pouvez simplement utiliser les touches de votre clavier pour passer à l'image suivante, même si aucune connexion n'est déjà configurée. Notez l'ordre que Figma utilise ici. C'est très pratique car Figma choisit la première image qu'elle trouve, puis elle passe par la rangée d'images S'il n'y a plus d'images, on passe à la prochaine image disponible. Il n'est pas nécessaire que ce soit une ligne claire. Cela pourrait être quelque chose comme ça, mais Figma va interpréter cela comme une ligne et parcourir le cadre un par un Peut également configurer un appareil pour l'aperçu. Assurez-vous que rien n' est sélectionné et cliquez sur le fond gris du canevas, puis vous verrez la liste déroulante des appareils dans un menu de prototypage Ici, vous pouvez choisir un appareil. Assurez-vous que l'appareil que vous choisissez correspond à la taille de vos cadres. Si nous sélectionnons maintenant un écran et revenons en mode présentation, vous pouvez voir que nous avons maintenant un appareil autour de lui Nous pouvons toujours passer d'un modèle à l'autre. Mais notez qu'il ne s'adapte qu'à l'appareil que vous avez configuré. Dès que nous passerons, par exemple, à nos mises en page de bureau, cela ne fonctionnera plus. La solution serait de stocker les designs de votre mobile et de votre ordinateur de bureau sur différentes pages pour votre prototypage D'ailleurs, nous pouvons également ajouter des vidéos ou des cadeaux animés à nos designs. Dans notre mode design, cela n'apparaîtrait pas, mais dès que vous passez en mode présentation, vous pouvez voir vos vidéos en action. Il ne s'agit que d'une fonctionnalité professionnelle. Outre le mode présentation, vous pouvez également sélectionner des écrans individuels dans Figma, puis appuyer sur Shift et sur la barre d'espace pour obtenir un aperçu dans le fichier Si vous oubliez ces raccourcis, vous trouverez un petit menu déroulant juste à côté du bouton de lecture trouverez un petit menu déroulant Vous pouvez également activer l'aperçu des informations et voir les différents raccourcis. 57. 02 Paramétrer le comportement de défilement: Dans Figma, nous pouvons configurer nos designs de telle sorte qu'en mode présentation, certains éléments soient fixes et d'autres défilables . Allons y jeter un œil. J'ai ici le design d'un écran mobile. Je veux que la navigation en haut reste fixe pendant que le contenu défile J'ai un autre bouton publicitaire ici, que j'aime aussi garder fixe. Jetons un coup d'œil au mode présentation, quoi cela ressemble en ce moment. J'appuie donc sur le bouton Play, je peux voir mon prototype, et je peux voir que si j'essaie faire défiler, absolument rien ne Alors revenons en arrière et configurons cela. Pour que le défilement fonctionne réellement, nous avons besoin d'un contenu plus grand que le cadre. Ici, je sélectionne le cadre parent appelé mobile, et sur le côté droit, vous pouvez voir une petite case à cocher appelée contenu du clip. Si je décoche cette case, vous pouvez voir que mon groupe de cartes est en fait beaucoup plus grand que mon cadre d'origine C'est vraiment important. Si vous n'avez pas de contenu que vous pouvez découper et qui risque de déborder votre cadre, vous ne pouvez pas ajouter de défilement Vous pouvez activer ou désactiver cette option. Cela ne fait aucune différence. Vous devez maintenant passer en mode prototypage. Cliquez sur l' onglet prototypage dans le coin supérieur droit, puis dans le défilement par débordement, choisissez le défilement vertical . Revenons à notre mode de présentation et voyons ce que cela a donné. Je peux donc maintenant faire défiler le contenu, mais comme vous pouvez le voir, mon entête et mon bouton ici ne sont pas fixes. Revenons donc en arrière et configurons cela. Choisissez l'élément, dans mon cas, l'en-tête que vous souhaitez conserver fixe, et passez au prototypage Vous verrez sous position l'option permettant de réparer, de rester en place. Notez qu'ici, sur l'élément enfant, vous avez également la possibilité de définir le comportement du débordement Ce serait donc le comportement de défilement dans ce cadre imbriqué Dans ce cas, nous ne voulons aucun comportement. Nous avons déjà défini notre défilement vertical sur le conteneur parent. Corrigons également ce bouton ici. Nous allons également régler cela pour un maintien fixe en place. Et maintenant, appuyons sur Play et voyons à quoi cela ressemble. Ainsi, mon conteneur parent défile bien et tous mes éléments fixes restent en place Si vous rencontrez un problème de défilement qui ne fonctionne pas, assurez-vous de cocher trois points Tout d'abord, dans votre onglet de conception, assurez-vous que le contenu découpé est plus grand que le cadre auquel vous avez affaire Dans le menu de prototypage, assurez-vous que le défilement par débordement Une fois l'élément parent configuré, choisissez maintenant l'élément enfant que vous souhaitez corriger. Passez au prototypage, puis au positionnement, choisissez Fixed Stay in Place 58. 03 Écrans de raccordement: Lier des écrans dans Figma est en fait très simple. Voici un exemple simple. Sur cet écran d'accueil, j'ai différentes formes de couleurs. Une fois que j'ai cliqué sur l'une de ces formes de couleur, j'ai voulu accéder à la page détaillée de chaque couleur. Assurez-vous que vous êtes en mode prototype, puis sélectionnez une forme, cadre de texte, peu importe. Une fois que vous le survolez, vous verrez apparaître ces petites bulles Vous pouvez simplement sélectionner n'importe quelle bulle. Peu importe le camp que vous sélectionnez. Maintenant, faites glisser un connecteur , fixez-le simplement au cadre auquel vous souhaitez être connecté et lâchez-le. Et c'est tout. Figma ouvrira automatiquement le panneau des détails de l'interaction pour vous, où vous pourrez personnaliser davantage votre interaction Vous pouvez le faire tout de suite, ou s'il est fermé, suffit de cliquer sur le connecteur ou directement sur l'interaction dans le panneau pour qu'il s'ouvre à nouveau. Une interaction est toujours composée d'un déclencheur, d'une action et d'une destination. Il s'agit de la partie supérieure de ce panneau ici. Au clic, c'est notre déclencheur, puis notre action est Naviguer deux, et la destination est notre cadre appelé orange. Maintenant, je peux modifier l'action du déclencheur et destination en cliquant simplement dessus. Je pourrais passer du déclencheur du clic au glissement, survol, à la souris, à la saisie, etc. Si nous voulons changer d'écran, il faut généralement cliquer sur un clic. Je vais m'en tenir à ça pour le moment. Mon action est Navigate two. Cela signifie que nous allons passer à une nouvelle page, et c'est probablement celle que vous utiliserez le plus. Il y a aussi retour, ce qui signifie que vous allez revenir à la page précédente. Ensuite, il existe des paramètres plus avancés que vous pouvez effectuer avec les variables. Vous pouvez faire défiler les éléments sur la même page. Vous pouvez ouvrir des liens externes, ouvrir des superpositions et les échanger . Ensuite, la destination. Je pourrais également choisir n'importe quel autre cadre dans cette liste déroulante. Cependant, vous remarquerez qu'au fur et à mesure que vous avez affaire à un plus grand nombre d'images, c'est un peu fastidieux Je préfère donc simplement sélectionner mon connecteur , puis choisir un autre cadre simplement en le déplaçant. Ci-dessous se trouve la partie animation. Voici donc comment les choses s'animent et se comportent une fois que l' interaction a lieu Maintenant, c'est la partie sophistiquée, la partie où vous configurez tous ces comportements magiques, choses se transforment les unes dans les autres et ainsi de suite Cependant, juste une mise en garde. Les micro-interactions sont vraiment utiles. Cependant, je vous recommande de vous assurer d'abord que votre connexion réelle et votre facilité d'utilisation fonctionnent, et que tout a du sens. Ensuite, avec votre équipe de développement, vous pourrez réfléchir aux animations et aux interactions que vous souhaitez ajouter. Parce que parfois un simple clic dans Figma est en fait assez difficile à configurer en CSS Donc, juste pour que ça soit un peu lisse, je vais opter pour Dissolve. Il peut définir le temps nécessaire pour se dissoudre dans un autre écran, et nous pouvons également choisir l'un des comportements prédéfinis. Je vais juste me laisser tranquille pour le moment, ce qui est plutôt sympa. Voyons à quoi cela ressemblerait dans notre aperçu. Je vais sélectionner le cadre parent, et je vais juste ajouter une maquette autour de celui-ci. Je travaille sur un iPhone de taille 14. OK, appuyons sur Play. Je vois donc mon écran d'accueil, et si je clique maintenant sur ma forme orange, je peux voir qu'elle mène à la sous-page Cependant, si je clique sur Retour, rien ne se passe. Configurons donc également les autres interactions. Revenons donc à notre fichier Figma. Ici, tout d'abord, je vais relier les deux autres formes. Je vais simplement faire glisser un connecteur, et vous pouvez voir que Figma a enregistré les préréglages que je viens d' utiliser pour le connecteur orange C'est vraiment sympa et utile pour accélérer votre travail. Ensuite, si je clique sur retour, je veux revenir à la page d'accueil ou à l'endroit d'où je viens. Je peux sélectionner tous ces boutons en même temps. Si vous maintenez la touche Maj enfoncée, vous pouvez en sélectionner plusieurs. Maintenant, je peux soit faire glisser la connexion à partir d'ici, soit cliquer sur le bouton Interactions Plus dans le panneau des propriétés de droite. Ici, je peux définir l'interaction, et je vais simplement y retourner. Passons donc à notre prototype , qui fonctionne parfaitement. 59. 04 Menu déroulant avec superpositions: Jetons un coup d'œil aux superpositions dans Figma. Un exemple parfait de superposition est donc un menu. Il s'agit donc essentiellement de son propre cadre. Mais si nous cliquons, par exemple, sur Travailler, nous ne voulons pas que l'ensemble du cadre passe à ce menu, mais nous voulons que le menu apparaisse sous notre barre de navigation ici. Nous les avons configurées à peu près comme n'importe quelle autre connexion. Sélectionnons donc le travail. Lien vers le menu. Maintenant, au clic, au lieu de naviguer deux fois, nous choisissons Open Overlay Dans le menu de superposition, je peux maintenant choisir la position, c'est-à-dire le centre, le haut à gauche, le bas , etc., par rapport au cadre parent, ou je peux également choisir le mode manuel, ce dont j'aurais besoin ici Je peux maintenant voir ce petit aperçu de mon overlay, et je peux le positionner sur le cadre selon mes besoins Je peux choisir qu'il se ferme automatiquement lorsque quelqu'un clique à l'extérieur, donc n'importe quelle zone autour d'ici, et je pourrais ajouter un arrière-plan pour un menu qui n'a pas vraiment de sens, alors je le laisse. Comme d'habitude, je peux choisir mon animation, donc je vais la dissoudre aussi facilement que d'habitude. Voyons à quoi cela ressemblera. Appuyons sur Play, et je peux voir que si je clique sur Travailler, mon menu apparaît, et si je clique à nouveau sur Travailler ou sur n'importe quel autre endroit du Canvas, il disparaîtra à nouveau. Je peux donc maintenant simplement connecter n'importe lequel de ces sous-menus ici à un nouvel écran. 60. 05 Types d'animation: Différents types d'animations. Lors du prototypage, nous avons la possibilité de changer le type d'animation Par défaut, il est toujours défini sur instantané. Appuyons sur Shift et sur la barre d'espace, puis nous obtenons notre aperçu du fichier. Si je clique ici, vous pouvez voir que j'ai un changement instantané. Au fait, si vous appuyez sur R, cela va se réinitialiser. Passons de l' instant à la dissolution. Vous pouvez voir que j' ai d'autres options. C'est le temps qu'il faudra pour se dissoudre. Ensuite, vous pouvez voir que je peux choisir le type de facilité d'entrée, facilité de sortie, etc. Cliquons dessus pour y jeter un œil. Vous pouvez voir que j'obtiens cette animation plus fluide. Plus loin, vous obtenez ce que l' on appelle des animations animées. Entrez, sortez, poussez, etc. Allons-y, et vous verrez que vous obtenez une petite image avec l'animation animée. Vous pouvez choisir l'endroit où il va pousser, par exemple, de bas en haut ou de gauche à droite, etc. Maintenant, jetons un coup d'œil. Vous pouvez voir que cela fait apparaître l'intégralité du nouvel écran. Maintenant, je voudrais souligner une dernière animation, qui est Smart Animate, et celle-ci est vraiment magique Smart Animate recherche des couches portant la même hiérarchie et le même nom entre différentes images ou également à l'intérieur d'un ensemble de composants entre différentes variantes, puis anime Smart Animate, qui recherche des couches portant la même hiérarchie et le même nom entre différentes images ou également à l'intérieur d'un ensemble de composants entre différentes variantes, puis anime Smart Animate, anime comme par magie des éléments tels que la couleur, la taille, la position Réinitialisons notre cadre et voyons ce que fait Smart Animate. Nous pouvons jouer avec la rapidité, et vous pouvez voir que nous obtenons de très belles animations fluides. Nous pouvons également jouer avec nos déclencheurs. Je vais me débarrasser de cette animation. En fait, je vais sélectionner l'ensemble de l'image à animer dans cette image, et je vais dire qu'après un certain délai, nous allons conserver les mêmes animations intelligentes Je dois dire que si je clique sur cette image ici, elle s' animera intelligemment ici Ouvrons donc notre aperçu, et vous pouvez maintenant le voir automatiquement animé du premier au deuxième écran. Faisons-le encore une fois. Maintenant, si je clique sur la miniature, elle s'animera intelligemment du deuxième au troisième écran Pour que cela fonctionne, il est important que vous ayez le même nom et niveau de hiérarchie entre vos différents écrans. Désormais, peu importe que au sein d'un niveau hiérarchique, par exemple, déplaciez les images au sein d'un niveau hiérarchique, par exemple, ou que vous disposiez d'un cadre de mise en page automatique ou d'un cadre standard. L'important est le même nom et la même hiérarchie pour que Smart Animate fonctionne Donc, si nous jetons un coup d'œil, sur notre deuxième écran, si nous déclipsons le contenu, nous pouvons voir que, par exemple, ce texte a toujours été là Sinon, il ne pourrait pas s'animer aussi bien. Il s'animerait toujours, il apparaîtrait, mais il n'y aurait pas cette belle animation animée Et il en va de même pour mes images, si je veux qu'elles soient déplacées, elles doivent d'abord conserver leur hiérarchie, sorte qu'elles fassent toujours partie d'un groupe d'images et qu'elles portent toujours le même nom. Et puis celles qui sont invisibles, je mets simplement l'opacité de la deuxième image à zéro Vous devez donc faire preuve de beaucoup d' intelligence dans l'affichage, masquage et le positionnement de vos couches pour obtenir la bonne animation. C'est pourquoi je recommande également de séparer votre prototypage de votre conception 61. 06 Composants interactifs: Jusqu'à présent, nous avons utilisé l'animation entre différentes images, et je vais maintenant vous montrer l'une de mes fonctionnalités préférées, les composants interactifs. Il s'agit essentiellement d'animations réutilisables définies dans votre composant. Comme son nom l'indique, pour que cela fonctionne, nous avons besoin de composants ou plutôt ensembles de composants présentant une variation latérale. Si cela ne vous est pas familier, un ensemble de variations est essentiellement composé de deux composants, deux composants ou plus en fait, et vous pouvez voir ici que j'utilise la convention de dénomination : bouton barre oblique par défaut, bouton barre oblique pointant vers le haut Ils sont de la même famille, ils sont juste dans un état différent, c'est vraiment la même chose. Ensuite, ici, sur le côté droit, je peux dire « combiner » en tant que variantes. Ce qui est génial, c'est que si vous retirez maintenant une instance ici, vous pouvez voir que dans ce bouton, les deux instances sont simplement enregistrées dans des états différents. Dans mon design, je vais utiliser de nombreuses instances de ces éléments. Je peux donc non seulement enregistrer les différents états qu'ils ont dans cette instance, mais je peux également enregistrer le comportement. Je dois donc me concentrer sur les paramètres de mon prototype. Ensuite, par exemple, pour enregistrer le comportement d'un bouton, l'état du survol, je souhaite l'ajouter Je connecte simplement mes deux boutons comme je le ferais auparavant avec n'importe quel autre cadre. Maintenant, vous pouvez voir que dans mon menu, il est indiqué « cliquez », ou « je vais changer cela en survolant », et il y a un changement à définir Cette modification apportée ici ne sera active que dans les ensembles de composants. Maintenant, je peux utiliser Instant Dsolve ou Smart Animate, je vais utiliser Smart Animate car il s'agit simplement d' Voyons maintenant ce que cela fait que nous puissions le voir dans notre mode de prévisualisation, je dois dessiner un cadre, et je peux maintenant ajouter une instance de mon bouton à ce cadre. Maintenant, jetons-y un coup d'œil. Lorsque je passe le curseur sur mon bouton, vous pouvez voir que mon comportement est sécurisé, et qu'il en sera de même partout où j'utiliserai ce bouton OK. Maintenant, je veux qu'il en soit de même pour mon interrupteur ici, mais je veux qu'il soit glissé ici puis transformé en interrupteur Maintenant, dans ce cas, je ne veux pas que l'interrupteur soit entièrement activé, mais je veux prendre cette petite bulle ici. Je veux sélectionner cette bulle, dessiner une animation, et vous verrez qu'elle indiquera au clic. Dans ce cas, je veux faire glisser, changer deux et faire une animation intelligente ici. Maintenant, dans ce cas, je dois te rendre la pareille. Donc, au fur et à mesure, il va revenir à mon état d'origine. Maintenant, je vais faire glisser une instance, placer sur mon cadre, et voir si cela fonctionne. Voici donc mon bouton, je le fais glisser, et vous pouvez voir qu'il change couleur avec Smart Animate 62. 07 Miroir Figma – Aperçu sur votre appareil: Figma propose une application fantastique qui vous permet de prévisualiser vos prototypes sur votre mobile Accédez au site Web de Figma et aux produits, vous trouverez l'onglet téléchargements cadre des téléchargements, vous pouvez télécharger la version IOS ou Android de l'application sur votre téléphone. Une fois que vous avez ouvert l' application mobile, vous êtes invité à vous connecter. Pour vous connecter, utilisez simplement votre identifiant Figma standard. Il est en fait important que vous utilisiez exactement le même identifiant que celui que vous utilisez pour vos fichiers de travail. Sinon, le miroir ne fonctionnera pas. Vous verrez ensuite un aperçu des fichiers de votre compte. Cependant, regardez en bas à droite et cliquez sur le miroir. Vous cliquez sur Commencer le miroir, cela reflétera n'importe quel cadre que vous sélectionnez en ce moment sur votre bureaubb. Tous les paramètres du prototype seront automatiquement visibles ici. J'adore donc l'avoir ouvert lorsque je travaille sur mes conceptions mobiles. Cela me permet de voir et de tester mon design de manière plus réaliste lors de la conception. Assurez-vous simplement de vérifier que la taille du cadre sur lequel vous concevez correspond bien à la taille du téléphone portable que vous utilisez. Dans mon cas, j'ai un iPhone 14 physique. Par conséquent, mon écran est également réglé sur ces dimensions. O. L'application agrandira ou diminuera votre design. Il aura donc l'air réel même si vous utilisez une autre taille. Cependant, cela peut vraiment entraîner des erreurs lorsqu'il s'agit, par exemple, de tester la taille des cibles tactiles. Vous pouvez également partager vos prototypes mobiles via le lien. Assurez-vous d'avoir copié le lien depuis la vue de présentation. Il s'ouvre ensuite automatiquement dans l'application mobile Figma s'il est installé sur un téléphone Encore une fois, assurez-vous que la taille de votre prototype correspond à la taille physique du téléphone utilisé. Dans ce cas, vous n'avez pas à vous soucier de la résolution , car le lien renvoie à Figma, qui s'en occupe 63. Partie 5 Prototypage: Transformons notre projet de cours en un prototype interactif pour le prototypage Assurez-vous que dans les pages, vous passez directement à la page de prototypage Vous trouverez ici, comme d'habitude l'exercice ainsi qu' une solution sur la droite. Si nous sélectionnons le premier écran de la solution, nous pouvons appuyer sur Shift et barre d'espace et ouvrir notre aperçu C'est un moyen très agréable et rapide de le parcourir à l'intérieur de votre espace de travail. Mais il est en fait probablement plus agréable de passer en mode présentation. Cliquez simplement sur le bouton de lecture en haut à droite pour obtenir l'affichage de votre prototype. En mode présentation, vous pouvez griffonner et vous pouvez également cliquer sur votre prototype et interagir avec celui-ci C'est ce que nous allons construire. Faisons d'abord en sorte qu'il soit défilant et corrigeons certains éléments comme la barre de touches. Tout d'abord, je vais sélectionner tous les écrans présentant du contenu débordant N'oubliez pas que vous pouvez déclipser ici et voir tout contenu qui va au-delà de nos points de vue Nous passons maintenant au prototype ici. Nous pouvons le régler sur un gribouillage vertical. Si nous sélectionnons ce cadre et que nous appuyons sur Shift et sur la barre d'espace, nous obtenons un aperçu Maintenant, nous pouvons voir que cela gribouille. Cependant, il ne défile pas assez loin car il ne respecte fondamentalement pas cela. Ici, j'ai ce Tapa. Ce que je dois faire, c'est lui donner une sorte de tampon, une sorte d'espace supplémentaire. Et vous pouvez le faire de plusieurs manières. Vous pouvez simplement dessiner un autre cadre en arrière-plan plus grand, ou ce que j'ai fait, c'est me laisser le déclipper pour que vous puissiez mieux le voir J'ai essentiellement regroupé ces groupes de cartes ici. Je l'ai appelé Card Group et je l'ai entouré d'un cadre. Donc, ce que je vais faire maintenant, c'est maintenir la touche Commande ou Contrôle enfoncée sur Windows et je vais juste ajouter de l'espace supplémentaire. Cela ne fera qu'utiliser de l'espace. Maintenant, regardez ce qui se passe si je griffonne à nouveau. Maintenant, ça marche. C'est également l'une des raisons pour lesquelles je recommande toujours d'avoir le prototypage sur une page séparée, car nous allons modifier un peu vos conceptions Il ne nous reste plus qu'à les connecter. J'ai ajouté quelques erreurs ici. Je vais sélectionner cette miniature, assurer que vous êtes en train de prototyper, puis vous verrez apparaître les Et je vais maintenant me connecter à celui-ci. Je vais en parcourir deux sur Tab. Au fait, vous verrez peut-être cliquer ici ou sur Tab, c'est exactement pareil. Naviguez sur deux pages de destination, et je veux vraiment que cela se dissolve. Cela pourrait probablement apparaître instantané ici, c'est la valeur par défaut. Je veux que ça disparaisse. Ensuite, à partir de là, je veux ouvrir une superposition. Notez que ce cadre est un peu plus court que l'autre. Je veux que cela emménage et soit posé sur ce design original sur onglet. C'est exact. Nous devons maintenant modifier cela pour ouvrir la superposition Il s'agit simplement du nom de ce cadre. Je veux qu'il entre par le bas. J'ai un centre en bas. Oui, c'est exact. J'en ai un proche. En cliquant à l'extérieur, j'ai ajouté un arrière-plan de 50 %, vous pouvez réinitialiser la position de gribouillage. Cela signifie simplement que si vous y retournez, remonterez au sommet , ce qui est plutôt sympa. Je vais encore faire deux petites choses. Je vais sélectionner celui-ci ici, et je vais ajouter une interaction. Et je vais dire sur Tab, revenez en arrière. Il va retourner d' où il vient. Parce que plus tard, je pourrais y entrer depuis n'importe quel autre endroit. Je vais faire de même pour la superposition. Sachez simplement que sur la superposition, nous voulons maintenant afficher l'onglet. Maintenant, si nous revenons en arrière, cela reviendrait au cadre précédent, à celui-ci. Parce qu'une superposition n' est pas un cadre réel, il s'agit simplement d'une superposition Donc, ce que nous voulons faire, c'est fermer cette superposition. OK, alors voyons maintenant un aperçu qui fonctionne bien. Je suis en train de cliquer ici. Cela fonctionne également maintenant. Je veux ouvrir l'overlay. Fantastique Fermons à nouveau la superposition. Génial. Si je clique ici, je rentre chez moi. J'ai un petit plus pour toi ici. C'est assez avancé, cependant, si nous déclipsons, vous verrez que j'ai matériel horizontal à griffonner Maintenant, comme je vous l'ai déjà montré, je l' ai placé dans un nouveau cadre appelé Card, et je peux maintenant le configurer pour qu' ai placé dans un nouveau cadre appelé Card, il soit griffonné avec le parent C'est exact, mais à l'horizontale. Et je vais faire de même pour celui-ci, Horizontal. Pour que cela fonctionne, il est important noter que ce cadre est plus petit, il a donc la taille requise. Il se termine au bord du cadre parent. Cela ne marcherait pas si je l' avais en entier, vous pouvez y jeter un œil et jouer avec, mais comme je l'ai dit, c'est un peu plus avancé. Allons y jeter un œil. Et cela fonctionne également très bien. OK, dernière petite chose à faire une démonstration en mode présentation. Vous avez également des appareils ici. Vous pouvez voir que je l'ai déjà configuré par défaut, il est réglé sur none. Vous pouvez choisir un appareil ici. Il est maintenant important que vous choisissiez l'appareil exactement adapté taille de votre écran. Allons y jeter un œil. J'en ai 390 sur 844. Si je passe au prototypage et à l'appareil, je dois choisir un appareil 390 x 844, téléphone 14 Si j'appuie maintenant sur Play, vous pouvez voir que j'ai maintenant cet appareil autour de mon design. Il fonctionne comme un prototype normal, mais il est intégré à ce bel aperçu. 64. 01 Partager et inviter les autres: L'un des grands avantages de Figma est que vous pouvez inviter d'autres personnes à rejoindre vos fichiers, équipes et projets, et collaborer en temps réel Si vous souhaitez partager un fichier , cliquez simplement sur le bouton Partager pour voir le modèle de partage s'ouvrir. Vous pouvez voir qui a déjà accès au fichier, ainsi que le type d'accès qui leur a été accordé. Il peut s'agir de droits d'affichage ou de droits de modification. Si vous êtes administrateur, vous pouvez également modifier le type de droits dans cette fenêtre. Si vous souhaitez inviter d'autres personnes, vous pouvez le faire en saisissant leur e-mail et en envoyant simplement une invitation ou en copiant un lien de partage. Ce qui est intéressant, c'est celui-ci. Il semble qu'à l' heure actuelle, si vous invitez, les utilisateurs n'ont que des droits de vue. Ce n'est pas un problème, car plus tard, une fois qu'ils seront invités, vous pourrez toujours modifier et contrôler cela via vos paramètres d'administration. Vous pouvez maintenant changer cela. Vous pouvez passer à n'importe qui, puis vous pouvez le modifier pour l'afficher ou le modifier. Si vous cliquez dessus, soyez prudent et assurez-vous de vérifier d'abord votre plan Figma actuel, car places supplémentaires peuvent entraîner des frais supplémentaires et vous ne voulez pas avoir de grosse surprise une fois votre facture arrivée vous ne voulez pas avoir de grosse surprise une à la fin du mois La façon de contrôler la vue et l'édition a beaucoup changé au cours du mois dernier. Il se peut également que nous assistions à des changements ici. Faites juste attention à qui vous donnez votre point de vue et à qui vous accordez vos droits. Ensuite, vous pouvez voir ici, n'importe qui dans le domaine du design, c'est actuellement une seule personne qui peut y accéder. Cela signifie que notre équipe ici s'appelle Moon Team, puis nous avons un projet appelé Design. Ici, vous avez d'autres liens, vous ne pouvez donc partager qu' un lien en mode def. Si vous travaillez dans le domaine du développement, il est tout à fait logique de ne leur donner qu'un lien en mode sourd. Nous n'avons donc ici qu' un prototype de lien. C'est quelque chose que j' aime beaucoup partager, par exemple, avec les clients, afin qu'ils n'aient pas accès au fichier lui-même. Vous pouvez publier auprès de la communauté, et vous pouvez également intégrer le code dans d'autres pages Si vous passez en mode sourd, vous pouvez également partager directement à partir d'ici, et cela devrait copier un lien vers le mode sourd pour vous. Nous pouvons choisir notre fichier, qui est probablement celui que vous utiliserez le plus, mais nous pouvons également choisir de partager notre projet ou l'ensemble de notre équipe. Vous pouvez simplement cliquer sur l'un de vos projets , puis vous trouverez également un bouton de partage ici, puis vous pourrez voir partager ce projet. Encore une fois, vous pouvez copier votre lien ou envoyer une invitation. Et vous pouvez monter d'un niveau hiérarchique, et vous pouvez également partager l'ensemble de votre équipe. Si vous partagez votre équipe, encore une fois, le peu malheureux sera à nouveau différent Vous pouvez donc choisir entre les droits d' affichage et de modification, et vous disposez d'autres options de contrôle ici. Au niveau de l'équipe, vous pouvez également cliquer sur la vue Admin. Donc, si vous êtes l'administrateur, cela vous permet de contrôler tous les droits depuis le panneau. Cela dépend également du type de plan que vous avez avec la FIMA. Cela peut donc sembler un peu différent si, par exemple, vous avez un plan d' entreprise qui vous donne une meilleure vue d'ensemble et un meilleur contrôle sur le contrôle de l'accès de votre équipe 65. 02 Créer une miniature: Ajout d'une miniature. Par défaut, Figma vous donne un aperçu du contenu de votre fichier sous forme de miniature Vous avez peut-être vu dans certains fichiers qu'ils ont une jolie miniature, indiquant un nom et donnant un petit Laissez-moi vous montrer comment cela fonctionne. Passons à ce fichier de conception ici. Maintenant, vous pouvez voir que j'ai déjà configuré une miniature. Je pourrais ajouter une page séparée et appeler cette page d'accueil et l'ajouter ici, ou je peux simplement l'avoir avec mon design. Ça n'a pas d'importance. Notre miniature n'est qu'un simple cadre une taille 16 à 9 Vous pouvez le configurer simplement en utilisant les diapositives de présentation depuis le menu du cadre. J'aime ensuite ajouter des éléments comme une catégorie. Il s' agirait, par exemple, d'un fichier de conception. Ensuite, j'aime bien ajouter un nom de projet, une brève description. Et si vous faites équipe avec de nombreuses personnes, c'est toujours une bonne idée d' ajouter qui est responsable ou qui a modifié ce fichier en dernier. Maintenant, sur le côté droit, j'aime retoucher une image, et vous pouvez vraiment configurer tout cela comme bon vous semble. C'est juste un cadre, juste un autre design. Ce que j'aime faire, c'est ajouter quelques informations sur ce à quoi cela ressemble. Copiez simplement quelques écrans représentatifs ou simplement un composant représentatif ici. Ensuite, je peux simplement le redimensionner, n'oubliez pas. L'astuce est d'appuyer sur K, et je suis dans le menu de mise à l'échelle maintenant, et maintenant je peux le réduire, et je l'ajoute simplement à ce cadre pour donner un peu plus de contexte. Une fois que je suis satisfait de mon design, il me suffit de sélectionner cet ongle en cliquant avec le bouton droit de la souris. Dans le menu, vous trouverez Set as umbnail. Vous verrez la petite icône représentant un ongle à côté de son nom. Si nous revenons maintenant à la page d'accueil, vous pouvez voir que ma miniature est maintenant configurée Si vous visitez ma page communautaire sur figma.com fola at Moon earning, vous pouvez voir le kit d'étiquetage des fichiers Mo earning et vous pouvez en obtenir une 66. 03 Bibliothèques d'équipes partagées dans Figma: Dans FiMA, nous pouvons créer des bibliothèques d'équipe partagées. Les bibliothèques d'équipe partagées permettent aux équipes de créer une bibliothèque centralisée de ressources de conception qui peuvent être partagées et réutilisées dans plusieurs projets de conception Vous pouvez stocker vos variables, styles et composants dans des bibliothèques externes. agit donc de vos couleurs, de votre configuration typographique et de tous les composants, des icônes, des boutons aux cartes et aux navigations Une mise à jour du style ou du composant variable dans la bibliothèque d'équipe partagée entraînerait une invite à mettre à jour tout fichier de conception utilisant le composant ou la variable de style. Vous pouvez travailler avec une ou plusieurs bibliothèques d'équipe. Il est important de noter que pour utiliser une fonctionnalité de bibliothèque d'équipe partagée dans Figma, vous aurez besoin d'un plan Figma pro ou supérieur Cela signifie que des coûts supplémentaires peuvent s'appliquer en fonction du nombre de rédacteurs que vous avez dans votre équipe. Assurez-vous de consulter les plans tarifaires actuels de la FIMA pour plus d'informations 67. 04 bibliothèques d'équipe: Bibliothèques d'équipe partagées. Ici, j'ai deux fichiers, et je remarque qu'à l'heure actuelle, ce ne sont que des fichiers de conception normaux. Vous voyez que si vous les survolez, vous obtenez ce fichier de dessin bleu que je peux Maintenant, celle-ci s'appelle bibliothèque, et ici je stocke mes composants. Et ce que je veux faire, c'est en faire une bibliothèque, puis ici, dans mon fichier de conception, je veux configurer ma conception utilisant les composants de la bibliothèque. Donc, la première chose à faire est de dire à ce fichier qu'il ne s'agit plus d'un fichier de conception, mais d'une bibliothèque. Ouvrons-le donc. Et puis, à l'intérieur, vous pouvez voir que j'ai des composants ici, et j'ai également configuré des variables de base. Passons donc au panneau Ressources, puis vous trouverez ici le symbole de la bibliothèque. Cliquez dessus, et vous verrez le fichier actuel et l'option de publication. Ajoutons maintenant une brève description. Ici, vous devez être aussi précis que possible. Je vais juste ajouter la première publication à partir de maintenant. Ensuite, nous obtenons une vue d'ensemble. Vous pouvez voir ici que nous avons nos quatre variables, et nous pouvons publier tout cela, ou nous pouvons simplement sélectionner certains composants ou variables à publier. Maintenant publions, et nous avons publié avec succès notre bibliothèque. Maintenant, il semble que rien ne s'est passé. Mais si nous retournons chez nous, vous pouvez voir que notre icône est maintenant passée du bleu au noir. Une icône noire, vous verrez que c'est déjà une bibliothèque. Pour utiliser notre bibliothèque, nous ouvrons notre fichier de conception. D'ailleurs, vous pouvez également utiliser des bibliothèques dans des fichiers de conception ou dans d'autres fichiers de bibliothèque. Dans notre fichier de conception, nous passons au panneau Actifs. Vous pouvez voir que nous avons également quelques préréglages de Figma avec lesquels nous pouvons jouer, mais nous voulons parcourir nos bibliothèques ou simplement cliquer à nouveau sur le symbole de la bibliothèque Et maintenant, via le menu déroulant, jetez un œil à votre équipe ou à toute autre équipe en fonction de l' endroit où se trouve votre bibliothèque. Il peut voir celui que nous venons de publier. Ajoutons-le à notre dossier. Vous pouvez maintenant voir dans le panneau des actifs que nous avons notre bibliothèque, et ici nous pouvons voir tous les différents composants. Nous pouvons bien sûr les remplacer et concevoir avec eux comme dans n'importe quel autre fichier Maintenant, n'oubliez pas que nous avions également quelques variables. Si nous cliquons sur les variables locales, nous ne les trouvons pas ici. Mais disons que nous dessinons simplement une forme ou un cadre, puis via le menu de remplissage, vous verrez qu' ici, vous avez maintenant une nouvelle palette dans laquelle les couleurs de notre bibliothèque sont stockées. Et d'ailleurs, vous pouvez également le séparer. Vous pouvez extraire deux bibliothèques, l'une pour les composants, l'autre pour les variables, puis les combiner ici. Vous les trouverez simplement tous ici dans le panneau des actifs. Comme vous pouvez le voir, si vous cliquez sur Ajouter plus, vous pouvez simplement les ajouter. Bien entendu, si vous souhaitez le supprimer, même manière, cliquez simplement sur le bouton de suppression. Si vous travaillez dans un fichier de conception et que vous souhaitez revenir au composant d'origine, vous pouvez simplement sélectionner n'importe quelle instance, puis via le panneau des propriétés, cliquer sur le bouton Accéder au composant principal pour accéder au fichier vos composants d'origine. Que se passe-t-il si les composants sont mis à jour ? Disons que nous ajoutons un rayon, puis passons également à nos variables. Remplaçons simplement celui-ci ici par un vert, par exemple, pour nous assurer que nous voyons les modifications. Maintenant, vous pouvez voir qu'il y a une petite bulle dans notre bibliothèque. Passez donc en revue les modifications non publiées. Cliquons dessus et cliquons sur Publier. Et vous pouvez également voir où vous avez trouvé les modifications. Maintenant, publions ceci. Nous aurions dû ajouter une description, d'ailleurs. Maintenant, si nous ouvrons un fichier dans lequel nous utilisons l'un des éléments modifiés, vous verrez également cette petite bulle apparaître ici. Si vous cliquez dessus, vous obtiendrez un aperçu de la mise à jour qui s'est produite. Vous pouvez soit les mettre à jour individuellement, Vous pouvez soit les mettre à jour individuellement soit simplement les mettre à jour toutes. 68. 05 Déplacer les composants vers des bibliothèques externes: Composants en mouvement. Nous avons ici notre design et nos composants. Maintenant, le seul endroit où nous ne les voulons vraiment pas, c'est sur la même longueur d'onde. Si nous les copiions puis les collions dans une nouvelle page, ce serait une instance. Ça ne marchera pas. Ce que nous pouvons faire pour cela, c'est soit cliquer avec le bouton droit de la souris et passer à une nouvelle page, soit appuyer sur Commande et X. Cela va couper les composants, puis nous pouvons les coller sur la nouvelle page, maintenir notre connexion. Si nous cliquons ici, vous pouvez voir que nous arrivons sur la page où se trouve actuellement notre composant. Maintenant, que se passe-t-il si nous voulons placer ces composants un fichier complètement différent et le reconnecter à notre conception ? Pour que cela fonctionne, nous devons d'abord accéder au panneau des ressources et enregistrer ce fichier, même s'il s'agit de votre fichier de conception en tant que bibliothèque. Publions ceci, et l'important est que les composants que vous êtes sur le point de déplacer soient publiés. Nous allons maintenant créer un fichier supplémentaire. Je vais juste appeler cette bibliothèque. Je vais maintenant sélectionner ces composants, et juste au moment où je les déplace vers la nouvelle page, je vais appuyer sur commande et sur x pour les couper. Je vais maintenant accéder à la bibliothèque que je viens de créer, et je vais les coller. Vous pouvez voir qu'il y a une petite alerte parce que je l'ai appelée bibliothèque, mais ce n'est pas encore une bibliothèque car nous devons la publier. Il indique de déplacer les composants de base vers ce fichier, publier la mise à jour de la bibliothèque. Publions ceci. Vous pouvez voir ici mon bouton et ma carte. Accédez à ce fichier et vous pourrez même obtenir plus d'informations. Regardons ce que cela signifie. Le composant va être déplacé. Ce fichier et ces instances seront connectés à ce fichier à l'avenir. Génial. C'est tout ce que nous voulons. Nous vous avertissons un peu que lorsque vous déplacez et modifiez le composant, toute personne qui accepte la mise à jour de la bibliothèque risque de perdre le remplacement. Donc oui, c'est le plus grand danger ici. Les dérogations ne sont pas nécessairement sûres. Ça marche parfois, parfois non. Mais nous devons quand même les déplacer, alors cliquons sur Publier. Maintenant que nous revenons à notre fichier de conception, passons à la première page. Nous pouvons maintenant voir que nous recevons également une petite mise à jour à examiner ici, et vous pouvez voir que nous avons déplacé ces deux composants de ce fichier. Nous voulons bien entendu le mettre à jour. Voyons maintenant si nous avons de la chance, nous avons de la chance et si nos écritures sont toujours intactes Comme mentionné, cela peut parfois entraîner la disparition de vos remplacements Maintenant, nous avons eu de la chance que tout fonctionne. Si nous passons au composant principal, vous pouvez voir que je passe à mon nouveau fichier de bibliothèque. Si nous revenons à notre fichier de conception en fait, au panneau des ressources, vous pouvez voir que cela consomme cette nouvelle bibliothèque, mais que le fichier lui-même n'est plus une bibliothèque car aucun composant n'est plus ajouté. Si nous passons à notre aperçu, jetons-y un coup d'œil, vous verrez que maintenant il s'agit d'une icône noire et que c'est notre bibliothèque, et que notre fichier de conception redevient un fichier de conception. 69. 07 Partage de design, de composants, de styles et de variables: Voyons ce que nous aimerions partager. Alors, comment documenterions-nous notre conception, composants, nos styles et nos variables ? Permettez-moi donc de vous donner un bref aperçu d'un fichier. Commençons par les composants. Nous stockons nos composants sur notre propre page séparée au sein notre fichier de conception ou nous les stockons dans un fichier entièrement distinct. Nous pouvons connecter un fichier de bibliothèque distinct à nos fichiers de conception, ou des bibliothèques d'équipe partagées. endroit où vous stockez vos composants, je vous recommande de les placer sur des sections. Cela créera des dossiers dans le panneau des ressources, ce qui vous permettra de tout organiser beaucoup plus facilement pour vous et pour les personnes avec lesquelles vous partagez des informations. Vous pouvez facilement renommer et réorganiser au fur et à mesure que votre projet grandit sans perdre les connexions aux instances De plus, vous pouvez toujours ajouter des informations supplémentaires sur vos composants dans ces sections. Mais ne vous inquiétez pas trop à ce sujet au début. Commencez simplement par les placer dans leur propre section. Un autre avantage des sections est que vous pouvez les marquer comme étant prêtes à être développées. Le même principe s'applique à nos styles et à nos variables. Ils peuvent être stockés localement dans le même fichier. Cliquez sur la zone grise du canevas pour obtenir un aperçu dans le panneau de droite. Vous pouvez également les stocker dans des fichiers externes, connectant via des bibliothèques d'équipe partagées aux fichiers de conception. Contrairement aux composants, il n'existe aucun lien avec un élément du canevas pour les styles et les variables. Néanmoins, je recommande vivement créer une vue d'ensemble pour vous-même, les autres concepteurs et développeurs. Pour nos variables de couleur, il s'agirait d'une feuille de style couleur. J'ajoute ensuite une hiérarchie de typographie et des informations sur les règles communes d' espacement et de mise en page Vous pouvez également inclure d'autres règles ou autres styles tels que les flous, les ombres et les dégradés Cela permet non seulement de transmettre des informations techniques, mais également de mieux l'utilisation des conceptions et le système sous-jacent. Comme toujours dans le domaine du design, l'établissement d'une hiérarchie visuelle et fonctionnelle est crucial. Maintenant, en plus de ces directives, nous voulons évidemment partager nos designs. Pour le design mobile, j'en utilise juste un. Mais pour les applications Web et les sites Web, j'ai généralement deux écrans principaux. Un pour mobile et un pour ordinateur de bureau. Il n'y a pas de règles établies. Adaptez-le aux besoins de votre projet. Il s'agit donc d'une page Figma fournissant un aperçu de tous les écrans Certaines équipes disposent également d'une page par fonctionnalité. Encore une fois, c'est à vous de décider comment structurer cela. Je peux également utiliser des sections pour structurer mes designs et indiquer ce qui est prêt à être développé. Si vous travaillez sur le prototypage, je vous recommande d'ajouter une autre page pour vos prototypes ou peut-être même un autre fichier, car cela peut impliquer des modifications et des écrans supplémentaires D'ailleurs, j'ai l'habitude de prototyper des flux de travail critiques, tels les inscriptions et les fonctionnalités spécifiques plutôt que le produit dans son ensemble. Vous pouvez utiliser des flux pour marquer les différentes sections de votre prototype. Personnellement, j'aime mettre de côté une page de mon dossier comme terrain de jeu pour tester les comportements réactifs et les éventuelles incertitudes. Cependant, je ne les inclus dans documentation de mes composants ou documentation de conception que s'ils sont pertinents. J'utilise également une sorte de système de gestion de fichiers où je peux ajouter des titres et des informations supplémentaires sous forme de puces. C'est ça. Tu es prêt à partir. 70. 08 Mode dev Partage avec le développement: Comment partager avec les développeurs en mode sourd. Veuillez noter que le mode sourd n' est pas inclus dans le forfait gratuit. Voici donc mon design, qui est constitué de composants, qui sont stockés dans une autre page. Pour permettre un meilleur partage avec le développement, Figma dispose d'un mode dit « sourd » Vous pouvez activer le mode sourd via la barre d'outils. Vous aurez le même aperçu du design, mais vous verrez que vos panneaux gauche et de droite ont légèrement changé. Si nous sélectionnons un élément, nous pouvons voir que sur le côté droit, nous obtenons des informations appropriées pour le développement. Regardons-y de plus près. Donc, tout d'abord, nous pouvons voir ici qu'il s'agit d'un composant et que nous utilisons une instance. Nous pourrions passer au composant principal en cliquant sur l'icône du composant. Donc, ici, vous pouvez voir qu'il est automatiquement passé à l'autre page et qu'il me montre le composant détaillé. Nous pouvons inspecter le composant ou l'instance. Ici, par exemple, si je sélectionne le texte, vous pouvez voir que je reçois la couleur, dans ce cas, la variable, la famille de polices, la taille, etc. Et d'ailleurs, vous pouvez choisir si vous souhaitez que ces informations soient affichées en CSS, IOS, Android, ou également en RAM ou en pixels. Ce n'est pas quelque chose dont vous devez vous inquiéter, mais c'est quelque chose que vos développeurs trouveront très pratique à configurer. Si nous continuons à cliquer sur notre composant, vous pouvez voir que toutes les petites distances et espacements que nous avons définis sont bien affichés et peuvent simplement être copiés Revenons à notre instance pour le moment. Et vous pouvez également constater qu' en survolant simplement notre instance, nous obtenons toutes ces informations, ainsi que la distance par rapport aux objets voisins Une autre fonctionnalité que j' aime vraiment est que si vous sélectionnez instance faisant partie d'un ensemble de composants, vous obtenez un petit bouton appelé Opening Playground. Et dans ce terrain de jeu, vous pouvez voir les différentes variantes de cet ensemble de composants. Une fois que vous aurez commencé à configurer des composants encore plus complexes avec des propriétés de composants, cela s'affichera également ici. Un autre avantage est que tous vos actifs, par exemple les images, ou ici, vous pouvez voir notre petite icône, sont vraiment faciles à télécharger. Vous n'avez donc plus besoin d'exporter les actifs séparément. Je peux voir que cela va automatiquement être téléchargé au format SVG Si nous sélectionnons cette image ici, vous pouvez la télécharger au format PNG, JPEC, etc. Vous pouvez également cliquer sur Exporter et vous pouvez même choisir d'autres résolutions. Pour des résolutions d'écran plus élevées, vous pouvez opter pour deux X, trois X, etc. et les exporter dans le format souhaité. Encore une fois, rien à craindre en tant que designer, car vos développeurs ont désormais tous ces outils à portée de main. Ce ne sont donc que des détails, et vous pourriez même créer un lien, par exemple, vers des ressources pour sourds Donc, ici, vous pouvez ajouter un lien. Si vous avez déjà configuré des composants, par exemple dans gup, vous pouvez vous connecter à Tokens, etc. Il s'agit d'un espace vraiment très puissant, et je vous recommande vivement de vous asseoir avec votre équipe de développement pour y jeter un œil. En plus de cela, cela vous aidera également dans la communication globale. Vous pouvez donc le voir ici en ce moment, il est écrit « prêt pour le développement », mais rien n'est marqué. Eh bien, si nous revenons à notre mode de conception, nous pouvons dessiner une section autour de n'importe quel design. Vous trouverez donc une section dans le menu des cadres ou vous pouvez utiliser les raccourcis Shift et S. Et disons que cette version pour ordinateur est déjà terminée, mais en fait, je travaille toujours sur ma version mobile . Dessinez une section autour de celui-ci et nous pouvons changer la couleur de fond pour nous assurer que nous pouvons le voir un peu mieux. Si vous passez la souris ici ou cliquez sur le nom, vous verrez apparaître ce petit panneau « prêt pour le développement Si vous cliquez dessus, cette section et tout ce que vous y placez sont maintenant marqués comme prêts pour le développement. Si nous revenons en mode sourd, vous pouvez voir sur votre gauche nous avons maintenant tout ce qui est prêt à être inspecté par les développeurs. Et dès que je serai prête à intégrer mes autres cadres à mon design, je pourrais simplement les ajouter à ma section, et d'ailleurs, vous pouvez ajouter autant de sections que vous le souhaitez. Donc, si je reviens à Ready for Development, vous pouvez maintenant voir que les deux sont marqués ici. Si je clique dessus, je zoomerai et je pourrai l' inspecter plus en détail. Une autre fonctionnalité que j'aime vraiment, c'est qu'elle vous montre tout changement dans votre design. Revenons à notre design et modifions-le légèrement. Disons simplement que je suis en train de changer le rembourrage ici. L'espace entre les deux est maintenant plus grand, donc quelque chose de vraiment subtil. Si je reviens en mode mort et que je sélectionne ce modèle, je peux maintenant voir ici comparer les modifications. Cliquons dessus. Et vous pouvez maintenant voir que de légères modifications ont été ajoutées. Ils sont donc parfois très subtils, et ici j'aime beaucoup utiliser la fonction de superposition Et maintenant, nous pouvons voir les changements et vous pouvez voir ce petit changement dans le rembourrage Si vous cliquez dessus, vous obtiendrez également des informations plus détaillées. En outre, je vous recommande toujours ajouter des informations supplémentaires sur vos composants et de donner une vue d'ensemble avec une feuille de style sur des éléments tels que l'utilisation des couleurs et la hiérarchie des typographies Vous pouvez partager directement depuis le mode sourd en cliquant simplement sur le bouton de partage. 71. 99 Merci: Bravo pour avoir terminé ce cours. N'hésitez pas à nous contacter à Moonlearningt. Vos commentaires nous intéressent toujours. Vous nous feriez également une grande faveur si vous pouviez juste prendre une minute et laisser un commentaire ici. Si vous aimez ce cours, n'oubliez pas de consulter nos cours supplémentaires sur Molearn. Nous couvrons tous les sujets, des bases mêmes de la conception d'interface utilisateur à Figma , en passant par certaines bases du code Assurez-vous de visiter notre site Web à molar point O où vous pouvez également vous inscrire à notre newsletter