Figma pour débutants

1. Introduction: Bienvenue à Figma pour le cours pour débutants. Ce cours s'adresse aux débutants, aux designers juniors et à ceux qui souhaitent changer de carrière et devenir designer. Nous apprendrons tout sur l'interface 3D, les composants, les styles, les variantes de mise en page automatique, le prototypage et les plugins. Si vous ne connaissez aucun de ces mots, je viens de dire que je vais vous expliquer tout ce que vous devez savoir pour avoir une base solide pour concevoir à Figma, simplement pour gérer vos attentes. Ce cours ne remplace pas l'école. Et vous devrez également beaucoup vous entraîner vous-même pour devenir designer. Selon le moment où vous regarderez ce cours, il se peut que je crée déjà d'autres cours sur le design. S'ils n'existent pas encore, ne vous inquiétez pas, ils sont en préparation. J'ai l'intention d'aborder des sujets tels que les systèmes de conception , comment prêter le premier emploi , comment améliorer les compétences visuelles, etc. Passons maintenant à la vidéo numéro un, une interface vigoureuse. 2. Interface Figma: Nous allons découvrir les boutons et fonctionnalités les plus importants de Figma et continuer à approfondir nos connaissances à chaque nouvelle vidéo. Pour commencer, il suffit de se concentrer sur deux vues, la vue haut niveau dans une vue de fichier, c' est-à-dire l'endroit où nous concevons. Lorsque vous ouvrez Figma pour la première fois, vous verrez cette interface. Donc, celui de haut niveau sur la gauche, vous avez un menu qui contient des fichiers. Drafts est un dossier contenant vos informations privées. C'est excellent si vous travaillez seul ou si vous vous entraînez. D'autre part, les thèmes sont utiles lorsque davantage de personnes travaillent sur un projet, car hiérarchie est un peu plus approfondie et offre des fonctionnalités avancées liées aux systèmes de conception, qui n'est pas abordé dans ce cours. Mais je vais mentionner une ou deux choses en cours de route. Au niveau supérieur se trouve le nom de l'équipe, puis à l'intérieur se trouve un projet est-à-dire un dossier, où vous conservez vos fichiers de conception. Je dirais que c'est tout en ce qui concerne les choses que vous devez savoir dès maintenant sur ce point de vue. Créons donc un nouveau fichier et voyons ce que vous pouvez y faire. Sur ma gauche, vous pouvez voir que je suis en train de rédiger des brouillons et je vais commencer par cliquer sur un nouveau fichier. Je parie que vous passerez le plus clair de votre temps dans cette vue. Je vais donc parcourir tous les boutons et sections importants et vous expliquer comment je l'utilise. En haut à gauche, nous avons un menu avec des tonnes d'actions. Mais la seule chose avec laquelle j' interagis, ce sont les préférences. L'augmentation de la quantité de nudge se fait à l'aide des touches fléchées. En gros, vous pouvez déplacer vos couches à l'aide de flèches. Lorsque je crée, j'utilise principalement les touches fléchées pour déplacer des objets, car je sais que je les déplace par incréments d'un ou huit pixels. Cela est lié aux grilles. Et si vous n'en avez jamais entendu parler, vous pouvez consulter ma chaîne YouTube. J'ai quelques vidéos qui expliquent ce qu'est une grille. C'est une connaissance essentielle en matière de conception. Découvrez-le. Passons maintenant aux autres boutons. Si je ne mentionne pas de bouton, cela signifie que je ne l'utilise pas vraiment. En continuant sur la droite, nous avons un outil Move. C'est un outil essentiel pour déplacer des objets. Le suivant est un cadre. N'oubliez pas le raccourci F, car le cadre est l'épine dorsale de chaque design. Vous concevez tout dans des cadres. Et aussi sur le panneau de droite, vous avez quelques modèles. Et généralement, vous devez simplement choisir le dernier iPhone et le design qu'il contient. À moins que vous ne travailliez sur un site Web, vous utilisez un modèle différent ou vous pouvez simplement mettre votre largeur et votre hauteur à votre guise. Ensuite, nous avons quelques formes géométriques. N'oubliez pas que c'est parce que vous allez l'utiliser beaucoup, cela semble fou, mais la plupart de l'interface n'est en fait que des rectangles. Ensuite, nous avons un outil de texte avec un raccourci T. convient également de le rappeler car c'est l' un des éléments fondamentaux de la conception. Donc, d'habitude, j'appuie simplement sur T et je crée ma couche de texte. Ensuite, nous avons un outil à main, mais je ne l'utilise jamais comme ça. J'appuie simplement sur espace. Faites glisser le canevas. Enfin, nous avons des commentaires, le pain et le beurre de Figma. Vous pouvez laisser des commentaires à vos collègues et ils peuvent y répondre. C'est super utile et je l'utilise tout le temps. Vous pouvez même étiqueter sans jambes. Si vous ne voulez pas voir les commentaires tout le temps pendant que vous concevez Shift C et que leurs changements direction apparaissent lorsque vous sélectionnez un élément, vous pouvez voir différentes propriétés. Elément décalé, le côté droit est l'endroit où vous manipulez les visuels en termes simples. Design, ça y est pour l'instant, nous allons apprendre des fonctionnalités supplémentaires fur et à mesure du parcours. Ensuite, nos composants. 3. Composants: composants ou des éléments que vous pouvez réutiliser dans vos conceptions. Supposons que vous ayez un bouton que nous devons utiliser dans chaque vue de votre conception avec un copier-coller habituel, ils ne partageront pas une seule source de vérité. Si vous modifiez l' arrière-plan d'un bouton, les autres n' en seront pas conscients. Entrez les composants. Si vous avez un composant qui est un bouton et vous utilisez des instances de ce bouton dans votre conception, modifications que vous apportez au composant principal seront répercutées sur les instances. Vous n'avez donc pas à rechercher chaque bouton et à le modifier manuellement. Imaginé comme un gain de temps, vous pouvez créer des composants à partir des couches ou des objets que vous avez conçus. Il peut s'agir de toute une gamme d'éléments tels que des boutons, icônes, des mises en page, etc. Nous allons créer un composant de bouton et en tirer des leçons. Faisons donc un arrière-plan, du texte. Centrez-le. Nous allons sélectionner tout ce qui se trouve sur la gauche, le bouton que vous voyez et ce rectangle, puis cliquez ici. Maintenant, nous avons un composant et nous voulons également l'appeler bouton de ce composant. Bon, maintenant que nous avons un composant, comment pouvons-nous accéder à ce composant de bouton ? Eh bien, il y a plusieurs manières différentes. Tout d'abord, vous pouvez accéder à Assets, puis vous pouvez voir nos composants locaux. Nous pouvons simplement le glisser vers vos designs comme ceci. Très facile. Ensuite, vous pouvez cliquer sur cette icône et vous aurez à nouveau vos composants locaux ici. Peu importe où vous y accédez. De plus, si vous appuyez sur Shift I, ce panneau de ressources s'ouvrira et c'est pareil. Maintenant, ce groupe ici, ces boutons ne sont que des exemples de celui-ci. Vous n'intégreriez pas naturellement ce type de composant dans vos créations. Ils devraient vivre ailleurs séparément. Cela peut se trouver dans une autre page ou même dans un autre fichier. Et je peux vous montrer la magie des composants très rapidement. Imaginons que cela soit dispersé dans le design. Je veux donc pimenter un peu ce bouton. Je veux changer de couleur. Laissez-nous quelque chose de bleu et aussi le texte. C'est donc lisible. Et peut-être que nous voulons y placer un certain rayon de frontière. Maintenant, elle est beaucoup plus jolie. La prochaine chose à faire est rendre ce bouton réactif. Qu'est-ce que cela signifie ? Si je fais glisser ça n'a pas l'air très bien. Il a l'air cassé et nous voulons qu'il soit intelligent et réactif. Passons donc à la vidéo suivante, la mise en page automatique. 4. Mise en page automatique: Dans cette vidéo, nous allons parler de la mise en page automatique. C'est une fonctionnalité très avancée et très complexe dont de nombreuses personnes ont eu du mal à comprendre comment elle fonctionne. Vous pouvez faire beaucoup avec la mise en page automatique, mais je vais essayer d'expliquer dans un langage simple avec exemples simples comment cela fonctionne et comment je l'utilise. J'ai déjà préfabriqué un peu de design ici pour que nous puissions agir plus rapidement à haute voix, rendre vos designs intelligents et réactifs. Commençons par un exemple simple. Un bouton, je vais le refaire. Vous pouvez donc positionner contenu d'un bouton en le faisant glisser manuellement. Il suffit de le mettre en noir. Vous pouvez également sélectionner deux éléments, puis les positionner. Il est donc aligné, vu qu'il change. Mais ce n'est pas ainsi que nous voulons concevoir car ce n'est ni réactif ni intelligent. Nous voulons donc sélectionner cette option. Créons un composant. Disons que c'est un meilleur bouton. Nous pouvons également ajouter un peu de piquant ici. Une chose, c'est que j'ai mis le rayon des coins ici, mais il ne reflétait pas et ne dessinait pas. C'est parce que vous devez vérifier le contenu du clip , car il découpera alors tout ce qui se trouve sous ce cadre, qui signifie que je verrai alors mon rayon d'angle. La prochaine chose que je veux faire est d'ajouter une mise en page automatique à ce bouton. Pourquoi ? Parce que quand je l'étire, il a l'air cassé. Ajoutons-le donc. Nous avons une nouvelle section avec des tonnes de nouveautés. Essayons donc de l'expliquer. La première option consiste à placer votre mise en page automatique verticalement ou horizontalement. Eh bien, je veux que les éléments du bouton s'empilent horizontalement, donc je vais en rester à celui-ci, l'alignement du contenu d'un cadre. Eh bien, je veux qu'il soit centré parce que je veux que le bouton de texte soit centré, sans qu'il soit appuyé sur l'un ou l'autre côté. Donc, au centre, il s'agit de l'espacement entre les éléments. Cela est utile lorsque vous avez plusieurs articles. Bien sûr, je peux vous le montrer rapidement ici, donc je vais dupliquer. Comme vous pouvez le voir, il est réglé sur huit pixels. Si je l'augmentais, alors l'espacement augmenterait. Bien entendu, la rangée du bas est réservée au rembourrage, c'est-à-dire à l'espace par rapport aux bords. Je ne veux pas que ce soit autant. C'est beaucoup. Mettons 16. OK, c'est plus raisonnable. Supprimons également cette étiquette supplémentaire ici, et voici le rembourrage pour le haut et le bas. Cela peut être 16. Bien sûr. Ou si vous le souhaitez, vous pouvez décider indépendamment quels sont les rembourrages de chaque bord. Donc maintenant, si nous essayons d'étendre ce bouton, il se trouve au centre. Il a l'apparence et se comporte comme je veux qu'il se comporte. Vous pouvez voir qu'en dessous, nous avons ce qu'on appelle un câlin. Alors, qu'est-ce que cela signifie ? Eh bien, lorsque vous activez la mise en page automatique, vous obtenez également certaines options en haut de cette section de cadre. Vous savez comment se comporte la largeur, si elle est fixe ou elle monopolisera tout ce qui se trouve à l'intérieur. Si vous mettez un câlin, il se contractera autour du contenu de ce cadre. Si vous essayez de l'étendre, il deviendra immédiatement fixe. Revenons aux câlins car nous voulons que tout soit réactif et nous ne savons pas quel sera le contenu ou le nom de ce bouton. Nous voulons donc qu'il se développe en conséquence. Supposons que si le bouton a un ordre d'étiquette plutôt que si nous le mettions fixe, alors vous pouvez voir que cela ne fonctionne pas. Ce n'est ni intelligent ni réactif. Nous voulons donc qu'il fasse à nouveau un câlin. Bien entendu, vous pouvez effectuer différents réglages sur les instances elles-mêmes. est aussi un moyen de le faire. Mais je vous recommande de faire un câlin car nous voulons qu'il soit réactif dès la sortie de la boîte. Le suivant est la hauteur. Est-ce une hauteur fixe ou cela va emporter du contenu ? Si nous devons simplement déplacer ça ici. Si j'élargis la hauteur de ce bouton, parce que nous l'avons aligné au milieu, au centre. Maintenant, il est centré, il fonctionne même si je élargissais comme ça. Mais avec l'alignement, je peux dicter où se trouvent mes textes ? Sur quel bord s'accroche-t-il ? Je veux qu'il soit au centre parce que dans tous les cas je veux qu'il soit au milieu. C'est donc parfait pour moi, mais je ne veux pas qu'il soit fixé à fois horizontalement et verticalement. Je vais donc tout mettre dans mes bras. De cette façon, quoi que j' écris pour le titre d'un bouton, il s'agrandira ou diminuera en conséquence. Si vous pensez que cela représente beaucoup d'informations, regardez ceci. Nous avons donc un design simple ici. Nous voulons créer un flux. Ou une liste de menus avec des éléments qui se répètent dans une colonne, je vais vous montrer comment procéder. Donc, d'abord, je vais tout sélectionner ici. Je vais utiliser le raccourci Shift a pour créer une mise en page automatique à partir de la sélection. Tu y vas. Mon design a changé maintenant, mais ça va. Je veux que l'espacement entre les éléments de cette couche extérieure soit, disons, de huit. Mais maintenant, je veux que la pizza et le prix soient dans une rangée, pas dans une colonne. Donc, ce que je vais faire, c'est lister la mise en page automatique. Je vais en créer un nouveau. Eh bien, ces deux-là sont sélectionnés. Shift a, nous allons maintenant changer de direction. Nous voulons qu'il soit contenu. Et puis vous pouvez voir que toute la limite dépend de la taille d'un conteneur. Mais je ne veux pas qu'il soit sur le côté gauche. Je veux que la pizza soit sur la gauche et que le prix soit sur la droite. Donc, ce que je vais faire, c'est passer à la mise en page avancée. Dans nos paramètres de mise en page, en mode d' espacement, je souhaite modifier cela de manière très importante. Et je choisirai l'espace entre les deux, ce qui poussera tous les éléments à décider. Comme ça. Maintenant, nous avons une pizza sur la gauche et un prix sur la droite. Que se passerait-il si je duplique le prix ? Disons que je souhaite appliquer une réduction. Il sera au milieu car il calcule l' espace égal entre les articles d'un conteneur donné. Mais si je veux que ces deux prix soient à nouveau sur la droite, eh bien, je dois les emballer dans un autre cadre. Je vais utiliser le raccourci de mise en page automatique. Je vais mettre, disons, 16 pixels d'espacement entre ces deux éléments, je vais zoomer un peu. Choisissons un prix. Options supplémentaires pour le texte, puis la décoration, barrer. Peut-être que cela peut être encore plus petit. Et nous pouvons peut-être changer. Ça prend un peu de grisâtre, et ça peut être rouge. Tu y vas. Donc, si nous sélectionnons ce cadre ici, appelé cadre à porter descriptif, nous pouvons voir que nous avons deux éléments, une couche de texte et un autre cadre qui se trouve être mis en page automatiquement. Et parce que nous n'avons que l'espace qui les sépare, les poussera réellement à décider. C'est très utile pour la conception, en particulier pour la conception de sites Web, lorsque vous avez des en-têtes similaires et que vous devez appuyer sur, disons, un logo ou un titre sur la gauche et sur le menu d'accueil sur la droite. Mais nous n'en avons pas fini avec la mise en page automatique imbriquée. Nous avons la mise en page automatique comme contenant pour cette photo et aussi cette pizza et son prix et aussi une description. Je vais créer une mise en page automatique à partir de tout ce cadre. Shift a. Maintenant, c'est la mise en page automatique. C'est un câlin. Je peux même mettre une hauteur fixe et mettre quelques pixels ici si je le souhaite. Et maintenant, si je duplique cette carte, ce n'est pas l'effet que je souhaitais vraiment. Je vais donc changer la direction du niveau supérieur ou de la mise en page ici. Et je peux simplement le dupliquer, et c'est intelligent, il est réactif, il colle exactement comme je le voulais. Une chose que je souhaite changer est l'espacement entre les éléments. 32 semble être un bon chiffre. Si nous ne voulons pas voir, par exemple, du design déborder sur le cadre, nous pouvons découper du contenu. Tu y vas. Une autre chose que je tiens à mentionner est que vous pouvez placer des éléments dans la mise en page automatique, mais le simple fait de le faire glisser dirait que je veux mettre ce bouton de commande et que je veux qu'il soit en taille réelle. Je vais donc simplement passer à cette option ici et sélectionner Field container. Et c'est ainsi que vous pouvez développer votre bouton ou tout autre élément du cadre qui est mis en page automatiquement. Tous les éléments qui se trouvent à l'intérieur d'un cadre avec mise en page automatique peuvent être étendus pour donner l'impression d'être contenus. C'est une option supplémentaire pour les objets, les éléments qui apparaissent à l'intérieur de la mise en page automatique. De plus, si vous souhaitez modifier l'ordre des éléments, vous pouvez simplement sélectionner un élément. Ensuite, à l'aide des touches fléchées, vous pouvez simplement monter et descendre, gauche ou droite et positionner vos éléments comme vous le souhaitez. Tous les espacements seront cohérents car Auto Layout est intelligent. C'est tout ce que je veux partager avec vous en matière de mise en page automatique dans cette vidéo, contenait beaucoup d'informations. La mise en page automatique ne se limite pas à cela, mais toutes les autres choses sont encore plus avancées. Alors arrêtons-nous ici. Réfléchissons-y un peu. Je vous recommande d' aller vous entraîner, d'essayer de créer la même interface que celle que j'ai faite ici. Ou vous pouvez simplement prendre une capture d'écran ou regarder votre application préférée et essayer de reproduire un peu l'interface à l' aide de la mise en page automatique. Ensuite, notre variance. C'est lié aux composants. Alors, on se voit là-bas. 5. Variantes: Bienvenue chez Variance. Ce sujet est une courbe d'apprentissage un peu plus abrupte, mais je ferai de mon mieux pour le rendre aussi simple que possible pour vous. La variance et les propriétés ne peuvent donc être appliquées qu'à deux composantes. J'ai un composant de bouton ici et je vois cette ligne appelée propriétés. Lorsque vous appuyez sur Plus, quatre options s'offrent à vous. Essayons chacune d'elles et voyons ce qui se passe. Je pense que l'apprentissage par la pratique est le meilleur moyen d'apprendre la variance et les propriétés. Donc, tout d' abord, utilisons le booléen. Un booléen signifie que certaines couches peuvent être masquées ou affichées. Ainsi, nous pouvons, par exemple, afficher et masquer une icône. C'est exactement ce que nous allons faire. Disons qu'il a la valeur par défaut de l'icône, true. Très bien. Ensuite, nous devons sélectionner cette icône et nous trouvons la ligne de couche ou ici, cliquez sur l'icône. Maintenant, tout est connecté. Et si je crée une instance de ce bouton, j'ai cette propriété appelée has icon, et je peux afficher ou masquer l'icône. C'est simple, non ? Vous pouvez également sélectionner tout ce que vous souhaitez afficher ou masquer et cliquer sur cette icône. Créez une nouvelle propriété à partir d'ici, vous n'avez pas à créer la première propriété à partir d'un parent. Vous pouvez créer des propriétés à partir de sous-composants. Essayons-le de cette façon. Disons qu'il y a du texte. Tu y vas. Et maintenant, lorsque nous cliquons sur l'instance, nous affichons ou masquons du texte En quelques clics, vous avez créé un bouton qui peut avoir une apparence très différente, mais vous n'avez qu'un seul composant assez élégant. Souvenez-vous donc que nous avions quatre options ici. Nous n'avons exploré que ces booléens. Nous pouvons donc également créer un échange d'instance. Je trouverai une icône, peu importe la belle propriété. Et comme tu peux le voir, il n'est accro à rien. Nous venons de le créer. C'est pourquoi j'aime créer ces choses à partir de composants réels qui changeront le comportement. Et puis vous n'avez pas ce point d'exclamation et c'est un peu plus rapide. Je vais donc trouver mon calendrier. Je vais cliquer sur cette icône, et je choisirai cette seule et unique option. Donc, ce qui se passe, c'est que nous avons une icône ici et nous avons ce petit menu déroulant où nous pouvons changer l'icône pour autre chose. Et bien sûr, d'autres options fonctionnent toujours. Et la dernière option était le texte. Je vais donc le créer à partir de la couche qui va changer de comportement. Donc, contenu, je vais cliquer sur cette icône ici, ou nous pouvons simplement créer une propriété. Il détecte tout ce que vous avez déjà conçu. Il est donc un peu plus rapide de le faire depuis l'intérieur de nos composants. Donc, sur les couches qui vont changer de comportement. Et quand je clique sur l'instance, je vois mon texte et je peux écrire autre chose. J'ai un moyen plus simple de gérer icônes et de modifier le texte dans les composants. Donc, quand il s'agit de différentes icônes, je trouve simplement mon icône, je la fais glisser, j'appuie sur la commande Option. Et lorsque vous voyez ces contours violets sur votre icône, il vous suffit de la relâcher. Et vous y voilà. C'est échangé. Donc, pas besoin de changer cette instance ici. En ce qui concerne le texte, je n'utilise pas cette propriété de texte ni ici. Parce que si vous appuyez sur T, il peut simplement changer les textes comme ça. Ce n'est pas si difficile. Je n'ai donc pas besoin d' utiliser cette propriété de texte car je viens modifier, le design lui-même. La dernière chose que nous avons, c'est la variante elle-même. Cliquons donc sur celui-ci. Lorsque vous voyez cette ligne pointillée qui indique que ce composant possède en fait des variantes à l'intérieur de plusieurs composants. Je vais donc créer une nouvelle variante. Changeons un peu le design. Maintenant, ça a l'air complètement différent. Et comme nous avons modifié la variante, nous avons immédiatement obtenu cette propriété. Je veux le renommer. Il suffit donc de double-cliquer. Appelons cela style, puis vous devez sélectionner chaque composant et ajuster le nom. La valeur par défaut convient à celui-ci. Je vais le laisser pour celui-ci. Je ne veux pas que ce soit très intuitif, alors je vais dire que c'est négatif. Ainsi, lorsque je sélectionne mon instance, je peux simplement choisir un style différent, comme un style négatif. Et je peux à nouveau manipuler d'autres propriétés comme masquer l'icône par exemple. Et cela fonctionne également lorsque vous y retournez. Je n'ai que deux variantes dans le composant bouton, mais regardez combien d' options différentes sont disponibles. C'est donc le pouvoir des variantes et des propriétés. Juste parce que les variances sont un peu confuses, je vous recommande de vous entraîner. Essayez de créer des boutons encore plus complexes. J'ai essayé de créer des éléments de carte , des champs de saisie, etc. Plus vous pratiquez, plus cela devient facile. Ensuite, les styles, quelque chose de très similaire aux composants réunis. 6. Styles: Bienvenue chez Styles. Les styles sont très similaires aux composants. Il s'agit simplement d'un ensemble de propriétés que vous avez enregistrées sous un seul nom. Ensuite, vous pouvez utiliser ce style. Où que vous soyez dans InDesign. Vous pouvez définir des styles de couleur, de texte et d'effet. Commençons donc par la couleur. Je vais le modifier pour qu'il soit, disons violet. Et je vais créer un nouveau style. Génial. Je vais en créer un autre. Disons du bleu. Excellente. Maintenant, si je crée un autre ovale, et si je clique sur l'icône de style, je peux voir que j'ai ces deux styles ici, donc je peux simplement l'appliquer et il aura le même aspect que celui-ci. Voici donc l'essentiel des styles. Essayons maintenant de faire de même pour le texte. Encore une fois, style icon Plus. Et tu le nommes. Grand. Ma force d' être intelligente ici, changeons-la. Fais semblant que ça ressemble à ça. Ensuite, vous voulez qu'il ressemble exactement à ce texte ici. Vous pouvez donc simplement cliquer sur ce nouvel élément de texte, accéder au style et choisir votre style. Essayons maintenant de faire du style Effect. Je vais donc faire un petit effet de la première semaine pour que ce soit visible. Et maintenant, nous allons lui donner un nom. Si nous cliquons sur Canvas, nous pouvons voir les styles d'effets, cette ombre. Je peux donc appliquer cela à d'autres ovales, même à un texte. Ce sont des styles, ils ne sont pas si difficiles. Il s'agit simplement d'un ensemble de propriétés que vous souhaitez réutiliser tout au long de votre conception. Dans la vidéo suivante, nous allons parler du prototypage. Alors, on se voit là-bas. 7. Prototypage: Afin de pouvoir réellement vous montrer le prototypage, nous avons besoin de quelques modèles. J'ai donc trouvé ce fichier auprès de la communauté et il sera excellent pour démontrer le prototypage. La première étape consiste à passer en mode prototype. Maintenant, l'interface semble un peu différente. Nous ne concevons pas. Je vais zoomer. Et disons qu'à partir de la connexion, je veux me retrouver sur la page d'accueil. Je vais donc simplement sélectionner le bouton de connexion et le relâcher lorsque cette flèche touche le cadre de la page d'accueil. Nous avons maintenant quelques détails d'interaction ici. Il existe de très nombreuses manières de déclencher quelque chose dans Figma, comme montrer un modèle ou passer à une autre vue. Mais j'utilise surtout onclick, mais juste pour que vous sachiez, vous avez également beaucoup d' autres options. Ensuite, l'option suivante consiste à accéder à une vue séparée ou à ouvrir la superposition, permuter la superposition, à fermer la superposition, revenir en arrière, à faire défiler ou à ouvrir même un lien. Pour l'instant, nous voulons juste accéder à une vue quelconque parce que vous avez laissé tomber cette flèche sur la page d'accueil, fig. Donc c'est par ici. Maintenant, nous pouvons également intégrer de l'animation dans nos prototypes pour qu'elle soit instantanée, qu'elle puisse se dissoudre, qu'elle puisse animer intelligemment, etc. Nous allons vérifier Smart Animate un peu plus tard parce que c'est une question intéressante. Mais pour l'instant, utilisons simplement l'instantané. OK, fermons ça. Ensuite, si vous appuyez sur cette icône Play ici, vous aurez un aperçu de votre prototype. Il est donc en cours de chargement. Très bien. Si vous cliquez à l'extérieur, vous verrez une zone cliquable. Cliquez maintenant sur Login, et c'est exactement ce que nous avons configuré dans notre fichier de conception. Maintenant, si nous voulons envoyer de l'argent, sélectionnons cette icône ou ici, et c'est notre écran suivant. C'est tellement amusant. Fermons-le. Je vais donc appuyer sur ici et je suis exactement là où je veux qu'il soit dans Send Money View. Maintenant, si je veux revenir en arrière, je vais appuyer sur Plus et Interactions. Cliquez sur Retour. Si je clique en arrière, j'y serai. Maintenant, nous avons bouclé la boucle. Alors. Si j'appuie sur Envoyer, je veux me retrouver dans cette vue. Et ça fonctionne. Voici donc l'essentiel du prototypage. Vous créez simplement des hotspots et que se passera-t-il ensuite ? Quelle vue chargez-vous ? Vous pouvez renommer. Vous pouvez mettre comme flux principal, puis essayons de faire quelque chose de différent. Je vais donc le sortir dupliqué. Et je vais aussi apporter ce clavier ici. Passez en mode design très rapidement. abord, nous devons en faire un cadre car les groupes ne fonctionnent pas avec le prototypage. Et puis passons en mode prototype, connectons ces deux cadres. Donc, au clic, je ne veux pas naviguer, je veux ouvrir une superposition. C'est exact. Voulez-vous qu'il soit centré ? Non. Je veux qu'il soit centré en bas et je veux qu'il se ferme lorsque nous cliquons à l'extérieur. Et oui, je souhaite ajouter un arrière-plan derrière la superposition. Nous pouvons même modifier l'animation. Entrez et vous aurez une petite vidéo ici pour avoir un aperçu de ce qui va se passer. Oui, c'est exactement ce que je veux de bas en haut. Et je vais terminer. Maintenant, en mode prototypage, dans la barre latérale, je peux accéder à un autre flux et maintenant je peux appuyer sur envoyer. Et en effet, nous avons un modèle. Je peux le fermer en cliquant à l'extérieur. C'est exactement ce que je voulais. Je peux même modifier l'animation, vivre pour qu'elle soit plus rapide. Je peux mettre 150 millisecondes. Maintenant, c'est plus rapide. Ça a l'air parfait ici. La prochaine chose que je veux vous montrer qui est très utile pour le prototypage est Smart Animate. Donc, dans ce but, je vais créer deux cadres. Je vais faire un cercle. Nous allons l'appeler cercle. Ensuite, je vais l' étendre dans les prochaines années. Donc, en gros, je suis en train d'encadrer mon animation parce que je souhaite utiliser l'option d'animation intelligente. Il est important que les éléments portent le même nom. Tous les éléments que vous souhaitez animer, photographier et animer intelligemment portent le même nom. Passons maintenant au prototype. Connectez-vous à l'autre cadre. Nous ne voulons pas le faire en un clic. Utilisons-le après délai. 800 millisecondes, c'est bien. Animation, animation intelligente. Et vous pouvez même choisir le type d'animation qu'il peut s'agir. Bouncy, par exemple. Ce qui se passe ici, c'est que cela fonctionne de manière automatique. Vous pouvez même faire une boucle. Donc ce cercle ne ferait que rebondir. Nous ne voulons pas l'utiliser au clic. Nous voulons dire après délai, intelligent, animé, rebondissant, génial. Maintenant, quand on prévisualise, il saute comme ça tout seul. Vous pouvez donc créer des animations assez intéressantes. Avant de terminer cette vidéo, je voudrais vous présenter l'un de mes propres projets. Ce n'est pas grand, mais j'ai des contacts ici. Donc, si j'ouvre mon mode prototype, vous pouvez voir que j'ai connecté de nombreux éléments entre eux. Et en général, les fichiers ressemblent à ceci une fois que vous avez appliqué vos points de connexion. Je pense que ces informations sont suffisantes pour vous aider à démarrer le prototypage. On peut faire des choses vraiment dingues avec des prototypes. J'ai vu des choses vraiment incroyables sur Twitter que les gens font. Et le ciel est la limite. Dans la vidéo suivante, nous allons vérifier les plug-ins. voit là-bas. 8. Plugins: Bienvenue sur les plug-ins vidéo. Celui-ci va être très court car les plugins sont vraiment simples. Si vous souhaitez installer un plugin, il vous suffit d'accéder à votre tableau de bord Figma, cliquer sur l'onglet Communauté ici, et vous aurez accès à toutes sortes de ressources et de plugins gratuits, etc. Il est vraiment rempli trucs super utiles et moins utiles. Mais c'est incroyable de voir comment les gens mettent autant d'efforts pour partager leurs actifs et leurs plugins. Ainsi, par exemple, nous pouvons cliquer sur une catégorie et rechercher des plugins. Les icônes sont des plugins assez populaires, je dois dire. Alors peut-être que nous pouvons essayer celui-ci. Pack d'icônes gratuit par I Conduct. Il suffit de le lancer. Le plugin est en cours de chargement et supposons que vous cliquiez sur celui-ci N. C'est parti. Chaque plugin fonctionne un peu différemment. Bien sûr, il serait logique pour moi de parcourir chaque plugin et de montrer comment il fonctionne, car il vous suffit de lire description de la documentation du plugin, puis de l'utiliser. Je n'utilise pas autant de plugins. Vous pouvez voir que je les ai installés juste pour les besoins de ce tutoriel. Mais, et aussi celui-ci, ceux que j'utilise, Unsplash ProToPie est parfois utile car j'aime créer mes types de produits dans cet outil. Corrigé. San Francisco est vraiment une bonne ville parce que lorsque vous utilisez la police de San Francisco, lorsque vous changez de taille, l'espacement des lettres doit également changer. Donc, cet excellent plug-in pour l'avoir parfait au pixel près et comme Apple l'avait prévu. Et ce dernier est en fait mon plug-in. Je l'ai écrit, ça fait une bibliothèque d'icônes. C'est quelque chose que je vais vous montrer dans mon prochain cours sur les systèmes de conception. Si vous trouvez que des plugins sont nécessaires dans votre travail, vous pouvez simplement en installer un certain nombre et les utiliser tout le temps. Personnellement, j'aime mes fichiers ne reposent pas sur des plug-ins car ils peuvent disparaître demain et vous aurez alors un problème. Mais bien sûr, je n'ai rencontré aucun plugin manquant ou quoi que ce soit de ce genre. Je peux vous montrer un autre plugin comment cela fonctionne sur Splash. Et on peut y mettre de la texture. Maintenant, ce rectangle a cette sensation de texture, est assez net et permet de gagner beaucoup de temps à la conception. Je vous encourage à accéder à l'onglet communauté et explorer les différents actifs que les gens partagent. Il y a une tonne de nouveaux plug-ins chaque jour. Et vous pouvez également trouver des systèmes de conception, des modèles pour différentes choses des acides visuels, etc. Toutes ces choses peuvent vous aider à devenir un meilleur designer et à voir comment les autres font certaines choses. Et c'est un représentant, nous avons appris tout ce que nous devons savoir pour réussir à utiliser Figma. Il y a, bien sûr, des tonnes de sujets avancés que je pourrais aborder dans certains de mes prochains cours. Mais jusqu'à présent, vous disposez d'une base vraiment solide pour commencer à concevoir efficacement dans Figma. Dans ma prochaine vidéo, je vais partager certains de mes mots de liste avec vous. Donc tu es là. 9. Outro: J'espère que vous avez apprécié ce cours et que vous avez la confiance nécessaire pour commencer à concevoir à Figma. Nous n'avons fait qu'effleurer la surface dans ce cours et vous pouvez débloquer beaucoup plus de connaissances si vous vous entraînez Vous pouvez me retrouver sur Twitter et aussi YouTube où j'ai des tonnes de tutoriels Figma. Si vous le souhaitez, podcasts, consultez ma soirée conçue par podcast. Faites-en une bonne et bonne conception.