Prototypage Figma : Une plongée en profondeur, du débutant au pro, pour UX/UI Designer

1. Introduction: Ce cours est une véritable plongée dans le monde du prototypage avec Figma Nous allons examiner de plus près configuration de base pour le prototypage Animation intelligente, composants interactifs, prototypage avec des variables, documentation et partage de nos prototypes Nous allons commencer par les bases et apprendre à connecter des écrans, à définir différents comportements de défilement et à prévisualiser nos designs Nous passerons ensuite à Smart Animate la partie magique du prototypage dans Je vais vous montrer toutes les superpuissances de Smart Animate, et nous allons également parler limites et résoudre les problèmes Une fois que nous aurons compris Smart Animate, nous passerons à la mise en place micro-interactions avec des composants interactifs dans Figma Les composants interactifs vous feront gagner beaucoup de temps lorsqu'il s'agit d' ajouter un comportement standard aux instances de votre conception. Une fois que nous aurons ajouté des variables pour créer des expressions et des instructions conditionnelles, vous verrez le véritable pouvoir de Figma prendre vie. Je vais vous fournir de nombreux exemples à explorer dans les fichiers Playground. Pour terminer, je vais vous montrer des astuces et des techniques pour documenter et partager vos prototypes avec d'autres. Nous examinerons la documentation des composants interactifs intégrés à Figma, ainsi que des systèmes de conception externes Je vous fournirai un fichier Figma qui vous permettra de travailler à mes côtés pendant les vidéos ou de revenir aux exercices avec des instructions détaillées à votre rythme Cela vous concerne si vous avez des connaissances de base de Figma ou si vous êtes un utilisateur avancé de Figma et que vous souhaitez améliorer vos compétences en matière de prototypage Il s'agit du cours de moon learning point IO. 2. !!! VEUILLEZ REGARDER ! ! ! Nouvelle interface utilisateur de Figma en version bêta: Heads Figma a mis à jour son interface utilisateur, et vous verrez peut-être un nouveau design au lieu de l'ancien Cette mise à jour est actuellement en version bêta fermée, donc tout le monde n'y a pas encore accès. Je mettrai à jour les arts et refléterai la nouvelle interface une fois qu'elle sera accessible à tous. Les modifications sont principalement visuelles. Toutes les fonctionnalités et tous les outils sont toujours là, juste à des endroits légèrement différents ou avec un nouveau L. Par exemple, la barre d'outils supérieure a été déplacée vers le bas. Le panneau latéral gauche, en revanche, est resté pratiquement inchangé. Vous pouvez désormais modifier le nom de votre fichier ici. Vous pouvez toujours voir toutes vos pages, couches et ressources. Sur le côté droit, vous remarquerez quelques changements lorsque vous cliquez sur un design, mais toutes les fonctionnalités sont toujours disponibles. Si vous êtes débutant et que vous trouvez la nouvelle interface confuse, vous pouvez cliquer sur le point d' interrogation en bas à droite et revenir temporairement à l'ancienne interface utilisateur. Cela n'a aucune influence sur votre design. Ainsi, vous pouvez suivre les vidéos du cours en utilisant l' ancienne interface utilisateur beaucoup plus facilement jusqu'à ce que vous soyez prêt à passer à la nouvelle. La FIMA déploie progressivement cette mise à jour. Si vous n'y avez pas encore accès, vous pouvez également en faire la demande auprès de la FIMA, mais il n'y a aucune garantie, certains d'entre vous devront peut-être être un peu patients L'administrateur de votre équipe devra peut-être également activer la mise à jour pour vous, alors assurez-vous de vérifier cela également. Figma met fréquemment à jour le logiciel, alors attendez-vous à des changements et soyez prêt à vous adapter Les fonctionnalités peuvent se déplacer comme ce bouton de bibliothèque a été utilisé à tous les endroits possibles ces dernières années. Mais ne vous inquiétez pas, rien ne se perdra jamais et vous vous habituerez à utiliser FIMA de manière beaucoup plus flexible Il met vraiment l' accent sur la convivialité. Il ne s'agit donc pas d'apprendre quelque chose par cœur, mais de comprendre le logiciel dans son ensemble. 3. MATÉRIEL : télécharger le fichier Figma: Vous voudrez peut-être travailler à mes côtés J'ai donc préparé des fichiers que vous pouvez télécharger dans le cours que vous suivez. Accédez simplement au projet et aux ressources. Vous y trouverez toutes les informations et le lien où vous pouvez télécharger le matériel. Sur cette page, vous trouverez de nombreux téléchargements. Vous pouvez simplement choisir la cause que vous défendez actuellement , puis cliquez simplement sur Télécharger. Et il téléchargera automatiquement le fichier pour vous. Pour importer les fichiers, il suffit de les télécharger. Il est important que vous ayez un compte Figma. Dans votre compte Figma, accédez aux brouillons ou accédez à un projet au sein d'une équipe. Cliquez sur le bouton Importer et vous pouvez choisir le fichier que vous souhaitez charger. Cela peut prendre un moment car ils sont assez volumineux, mais une fois que vous les aurez importés, ils seront enregistrés sur votre compte et vous n'aurez pas besoin de répéter ce processus. À l'intérieur du dossier. Vous trouverez des informations pour travailler à mes côtés dans les vidéos, mais j'ai également ajouté quelques instructions afin que vous puissiez toujours revenir à votre rythme, essayer et pratiquer. Je travaille avec des polices Google pour la plupart de mes créations. Donc, si vous utilisez l'application Figma, vous n'avez rien à faire ou les polices Google sont préchargées automatiquement. Si vous souhaitez travailler avec Figma dans le navigateur, il vous suffit de rechercher la police qui vous apparaît comme manquante, par exemple Poppins, que j'utilise beaucoup. Ensuite, vous pouvez télécharger directement cette police, l'installer sur votre ordinateur et vous êtes prêt à partir. 4. NOUVEAU ! Mises à jour 2023: Fin juin 2023, lors d'une conférence sur le conflit organisée par Figma, quelques mises à jour du prototypage ont été publiées Tout fonctionne toujours comme avant. Cependant, il existe peu d'extras de ce type. Nous avons un fichier interne, un aperçu. Notre menu de prototypage est désormais visible juste à côté de nos connecteurs Et nous pouvons prototyper avec des variables. Assurez-vous de télécharger la dernière version du fichier Figma Vous pouvez également y indiquer clairement nouveautés et où vous pouvez tout trouver. Permettez-moi de vous présenter rapidement les nouvelles fonctionnalités afin que vous soyez au courant de tout changement au fil des vidéos. Donc, comme avant, si vous sélectionnez image et que vous cliquez sur le bouton Play, aperçu s'ouvrira pour vous. Cependant, nous avons maintenant un autre moyen de prévisualiser, c' est-à-dire que si nous cliquons sur la petite erreur, vous pouvez voir l'aperçu dans le fichier. Cela signifie donc que nous avons une petite fenêtre d' aperçu directement dans notre fichier pour voir notre prototype et Action, ce qui est très pratique. Il existe également un raccourci pour cela. Appuyez simplement sur Shift et sur la barre d'espace pour ouvrir la fenêtre d' aperçu. Et d'autres modifications : si vous cliquez sur n'importe quel connecteur, le menu de prototypage se trouvera désormais exactement là où se déroule votre interaction avant que cela n'ouvre une fenêtre en haut à droite Dans le menu, vous retrouvez toujours tout comme avant, il a juste une mise en page légèrement différente. De nouveaux éléments ont été ajoutés, à savoir des variables et des conditions. Tout le reste est déjà passé par là. Si vous souhaitez utiliser des variables et des conditions dans le prototypage, je vous recommande variables et des conditions dans de vous familiariser d'abord avec les variables Il s'agit d'une toute nouvelle fonctionnalité de Figma et j'ai un cours distinct à ce et j'ai un cours distinct Vous pouvez ensuite vous lancer directement dans le prototypage grâce à ces nouvelles fonctionnalités C'est à peu près ça. Amusez-vous à prototyper 5. BASICS : 01 L'espace de travail prototype Figma: Commençons donc par quelques notions de base concernant l'espace de travail lorsqu'il s'agit de prototypage. Nous avons donc ici quelques configurations de conception pour mobile et d'autres pour ordinateur de bureau. Et par défaut, nous serons dans l'onglet Conception. À côté de l'onglet Conception, vous trouverez l'onglet Prototypage. Ou vous pouvez également utiliser le raccourci pour basculer entre eux, ancien 89, et d'ailleurs, zéro serait le mode inspection. Nous allons donc découvrir ce menu plus en détail ici. Pour l'instant Sachez simplement que si vous cliquez sur le canevas gris, vous définissez les paramètres généraux du prototype. Donc, n'importe quel appareil que vous souhaitez configurer, nous en saurons plus plus plus 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. Si vous sélectionnez un cadre sur votre toile, vous verrez que le menu de prototypage change ici. Et c'est là que nous allons travailler la plupart du temps. Nous allons apprendre à configurer différents flux, à configurer interactions et des animations entre différents écrans et même au sein d'ensembles de composants. Et nous allons parler du comportement de défilement. Et si vous cliquez ici, vous allez essentiellement revenir aux paramètres généraux de votre prototype. C'est donc le même menu que si je cliquais simplement sur l'arrière-plan du canevas. Faisons ça encore une fois. Je sélectionne n'importe quel cadre. Vous pouvez maintenant voir cela un peu plus loin et les paramètres du prototype. paramètres du prototype ne concernent donc que la configuration générale avant tous les cadres et tous les éléments contenus ici. Maintenant, fichier de conception, c'est ici que nous allons configurer le design et tout le comportement de notre prototype. Si nous voulons voir notre prototype et son action, nous devons appuyer le petit bouton Play en haut à droite de votre fichier. Cela permet ensuite de passer en mode présentation ou en mode aperçu. Vous passez la souris dessus. Les raccourcis vont également vous être présentés. Dans mon cas, comme je suis sur un Mac, tout dépend de Command and Enter. Et vous pouvez voir que cela ouvre maintenant un nouvel onglet. Donc, dans cet aperçu, vous allez voir une seule image au centre. Si vous cliquez sur un fond noir vous obtenez d'autres options qui vous permettront commenter et de partager des commentaires avec votre équipe. Et sur le côté droit, vous trouverez les options de partage. Ainsi, avec un lien ou en invitant, vous pouvez partager et même obtenir un code intégré pour votre prototype. Et nous allons parler de toutes ces options de partage plus en détail au cours du cours. Vous pouvez choisir ici la manière dont vous souhaitez que votre prototype soit affiché. Si vous l'utilisez simplement, vous pouvez passer d'une option à l'autre afin de voir les différentes tailles façon dont vous souhaitez l'afficher. 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. Et notez l'ordre que Figma utilise ici. C'est donc très pratique car Figma choisit la première image et la trouve, puis parcourt la rangée d'images. S'il n'y a plus d' images et qu'il va passer à l'image disponible suivante. Il n'est donc pas nécessaire que ce rôle soit clair. Cela pourrait être quelque chose comme ça, mais Figma va interpréter cela comme une ligne et parcourir le cadre un par un. 6. BASICS : 02 Où mes prorotypes devraient-ils ?: À présent, où devez-vous installer vos prototypes ? Eh bien, nous pouvons passer de l'onglet Conception à l'onglet Prototypage dans Figma. Vous pouvez simplement les configurer dans vos conceptions existantes. Cela peut convenir à un très petit projet, mais en général, je vous recommande de faire une copie de vos écrans, puis de créer au moins une page ou même un fichier entièrement personnel et de copier vos cadres ici. Et je n'aurais désormais cet endroit désigné que pour mon prototypage. La raison en est que si je travaille sur le prototypage, je vais probablement configurer de nombreuses versions et modifier légèrement mes conceptions pour prototypage fonctionne comme je le souhaite. En attendant, je veux que mon design reste assez épuré et qu'il ne s'agisse que d'un aperçu des pages existantes. Cela aura plus de sens une fois que nous aurons commencé à construire nos prototypes et aussi une fois que nous aurons parlé de la documentation des différents comportements. 7. BASICS : 03 Aperçu de l'appareil à l'écran: Dans Figma, vous pouvez configurer un aperçu de l'appareil, ce qui est plutôt sympa. Donc, si nous sélectionnons l'écran ici et revenons à notre onglet Conception. Je peux voir que ce vert est configuré comme un iPhone 14. Oui, je reviens à mon menu de prototypage. Je peux aller afficher les paramètres du prototype. Ou c'est comme si je cliquais simplement sur la toile grise. Et puis dans l'appareil, je peux choisir l'iPhone 14 parmi mes appareils prédéfinis. Je peux choisir une couleur ici, alors optons pour la lumière des étoiles. Et je pourrais également modifier la couleur de fond à mon goût. Alors maintenant, revenons à jouer. Et vous pouvez voir que mon dessin se trouve maintenant à l'intérieur de cet appareil. Sachez qu'une fois que vous avez prononcé un aperçu mobile, certains déclencheurs changeront de nom. Donc, cliquez, par exemple, cela s' appellera Tap, mais cela fonctionnera exactement de la même manière. Maintenant, la seule chose à laquelle vous devez faire attention c'est que si vous parcourez vos différents écrans, tout est parfait tant que vous continuez à travailler sur cette taille de mobile. Dès que vous accédez à l'affichage de votre ordinateur, que j'ai dans le même fichier de conception, vous pouvez voir qu'il s'agit simplement de sauter ici, mais que les paramètres de ces prototypes sont conservés car ils sont définis pour l'ensemble de cette page. Si vous souhaitez utiliser un aperçu de l'appareil, je vous recommande de créer une deuxième page pour le prototypage. Je vais donc appeler ce bureau prototype. Et j'aime bien ajouter des icônes, mais ce n'est absolument rien à faire. Vous pouvez simplement les copier. Et je vais utiliser cette petite icône de prototypage ici. Et maintenant, je vais appeler ce prototype de serpillière. C'est donc ici que sera l'écran de mon téléphone portable. Et j'aime aussi créer une sorte d'application séparée. Si vous êtes sur le plan gratuit Figma, vous ne serez peut-être pas autorisé à avoir autant de pages. Alors, laissez le tout sur une seule page et n'utilisez pas l'aperçu de l'appareil. Il ne me reste plus qu' à les copier sur ma nouvelle page. Et vous pouvez déjà le constater ici. Dans les paramètres de l'appareil, ils sont définis sur aucun. Je ne laisse généralement aucun ordinateur de bureau. Mais vous pouvez également vérifier s'il existe un appareil que vous souhaitez utiliser. Vous pouvez donc voir 1280. Je dois donc vérifier que cela correspondrait au MacBook Air. Je vais donc créer un prototype et je peux maintenant simplement choisir le MacBook Air, et j'aurais celui-ci ici. Maintenant que je joue, vous pouvez voir que cette page est configurée pour le MacBook Air. Si je reviens en arrière et que je sélectionne mon affichage mobile, alors celui-ci reste sur l'appareil de l'iPhone. Il s'agit donc d'un concept très important pour comprendre que les prototypes ne communiquent pas entre différentes pages même s'ils se trouvent dans le même fichier. 8. BASICS : 04 éléments fixes et défilables: Dans Figma, nous pouvons configurer des éléments telle sorte qu'en mode présentation, certains éléments soient fixes et d'autres défilables. Jetons-y un coup d'œil. Ici. J'ai le design d'un écran mobile. Je souhaite que la navigation en haut reste fixe pendant que le contenu défile. J'ai un autre bouton Ajouter ici, qui est également censé rester fixe. Jetons un coup d'œil au mode présentation, quoi cela ressemble actuellement. Si j'appuie sur le bouton Play, je peux voir mon prototype. Je peux voir que si j'essaie un défilement, il ne se passe absolument rien. Revenons donc 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. Je sélectionne donc ici le cadre parent appelé mobile. Et sur le côté droit, vous pouvez voir une petite case à cocher intitulé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. Et c'est très important si vous n'avez pas de contenu que vous pouvez découper et qui déborderait votre cadre. Dans ce cas, vous ne pouvez pas ajouter de défilement. Cette option peut être cochée ou désactivée. Cela ne fait aucune différence. Ce que vous devez faire maintenant, c'est passer en mode prototypage. Cliquez donc sur l' onglet Prototypage en haut à droite. Ensuite, dans le défilement par débordement, choisissez le défilement vertical. Revenons à notre mode 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 en-tête et mon bouton ne sont pas fixes. Revenons donc en arrière et configurons cela. Choisissez, dans mon cas, l'en-tête que vous souhaitez conserver fixe et passez au prototypage. Vous verrez en dessous l'option positionnée pour fixer, rester en place. Notez qu'ici, sur l'élément enfant, vous avez également la possibilité de définir le comportement de débordement. Ce serait donc ce comportement de défilement dans ce cadre imbriqué. Dans ce cas, nous ne voulons aucun comportement. Nous avons déjà parlé de notre défilement vertical vers le conteneur parent. Corrigons également ce bouton ici. Nous allons régler ce problème pour le régler et le maintenir en place également. 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 constatez que le défilement ne fonctionne pas, assurez-vous de vérifier 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 est défini. Une fois que vous avez configuré l'élément parent, choisissez l'élément enfant que vous souhaitez fixer en place, passez au prototypage, puis un autre médecin choisit «  fixe, restez en place ». 9. BASICS : 04 éléments collants sur le défilement: Éléments adhésifs sur le parchemin. Vous pouvez également créer un effet sur les éléments qui restent collés lorsqu'ils atteignent le haut de votre écran. C'est à peu près la même configuration que pour les éléments fixes. Vous devez donc vous assurer que le contenu découpé de votre cadre parent déborde du cadre pour que cela fonctionne. Et cela doit être réglé sur le défilement vertical. Déclipsez maintenant puis choisissez les éléments que vous souhaitez conserver. Donc, dans mon cas, il s'agit de la section intitulée Nouveau et de cette section appelée enregistrée. Ensuite, je reviens au prototypage. Et maintenant, en position plutôt que fixe, je vais choisir une butée adhésive sur le bord supérieur. Pour que cela fonctionne, il est important de définir l'ordre dans votre panneau de couches de manière à ce que la position soit la dernière. Donc, dans mon cas, celui-ci bleu appelé enregistré se trouve au-dessus de l'autre. Il semblerait donc que celui-ci soit le premier. Mais en gros, dans ma hiérarchie de couches, en réalité, cette section deux se trouve au-dessus de la première section. À présent, nous allons choisir le cadre parent. Revenez à nouveau à Design clip. Et appuyons sur Play pour voir si cela fonctionne. Ça a l'air génial. Vous pouvez toutefois garder votre en-tête fixe et ensuite faire en sorte que ces sections s'arrêtent en dessous l'en-tête en corrigeant simplement l'en-tête. Cela ne fonctionnerait pas parce qu'ils rechercheraient le même bord supérieur. Une petite astuce que vous pouvez utiliser ici consiste à dessiner un cadre autour de votre section. Alors j'ai appelé ça « collant ». Et puis à l'intérieur, vous pouvez voir que ma section normale est placée autour d'un cadre un peu plus grand. Cette distance est donc la même que celle du menu en haut. Je suis donc en train de créer un décalage artificiel. Et j'ai fait de même pour mon autre section ici. J'ai donc fait de même pour le bleu ici. Capturez ceci et appuyons sur Play pour y jeter un œil. Et vous pouvez voir que maintenant il met en mémoire tampon cette petite section, ce qui crée un décalage par rapport à mon menu et cela fonctionne parfaitement. 10. BASICS : 05 cadres de nidification pour présentation: L'un des grands pouvoirs de Figma réside dans les cadres de nidification. Et cela ouvrira également de nombreuses possibilités en matière de prototypage. Essayons donc de comprendre cela un peu mieux. Voici donc mon design et c'est généralement l'écran que je représente sous forme de cadre. Et ici, j'ai déjà configuré tout ce que je voulais garder fixe et défilable. Si je passe en mode présentation, je peux faire défiler un prototype vers le haut. Jusqu'ici, tout va bien. Mais si je voulais bien dessiner un cadre autour de celui-ci. Dessinons donc un cadre simple et donnons-lui une autre couleur de fond. Nous le comprenons donc un peu mieux. Et je vais maintenant passer en mode présentation. Ensuite, vous pouvez voir que Figma a pris le cadre parent. Donc, tout ce qui contient d'autres cadres est mon cadre d'affichage. génial maintenant, c'est que tout ce que j'ai mis en place dans ce cadre. Ainsi, tous les éléments fixes et les anciens éléments défilants restent en place. Et nous pouvons en faire un grand usage. Parce que cela nous permet de présenter notre prototype dans son contexte. Donc, ce que nous pouvons faire, par exemple, installer ici un autre cadre. Et sur ce cadre, je peux ajouter un titre, quelques puces descriptives décrivant mon prototype. Et j'ai également ajouté une image, donc une maquette où je placerai mon prototype. Vous n'êtes pas obligé d'ajouter cela. Alors maintenant, je vais sauter par-dessus et copier mon dessin original. Et avec lui, une copie de toutes les configurations, défilement des ordres et des éléments fixes. Et je vais le coller dans ma maquette ici. Arrondissons les coins pour qu' il s'adapte un peu mieux. Donc, si je sélectionne maintenant ce cadre et que j'appuie sur le mode présentation, il m'affichera le cadre entier. Donc, l'intégralité des diapositives de présentation que j'ai mises en place. Et ce qui est génial, c'est que mon prototype fonctionnera toujours. Il peut donc vraiment se présenter dans son environnement. Si vous déplacez votre souris vers le coin supérieur droit de l'écran, la liste déroulante Options s'affiche. Et il peut choisir des éléments tels que si vous voulez une présentation soit adaptée à la largeur de l'écran, etc. Quoi que vous choisissiez ici, si vous cliquez ensuite sur Quoi que vous choisissiez ici, le bouton de partage du prototype, toute personne visionnant votre présentation à l'aide ce lien aura alors les mêmes préréglages. Vous pouvez également connecter différents cadres de présentation. Ainsi, tout comme un prototype standard, vous pouvez créer une présentation qui inclut un prototype fonctionnel et cliquable. La taille de cette fonctionnalité est vraiment incroyable pour épater tout le monde lors d'une présentation C'est vraiment génial de comprendre le fonctionnement du prototypage et de Figma. À savoir que vous définissez le prototypage sur les cadres individuels. Et c'est quelque chose qui vous aidera beaucoup lorsque nous approfondirons un peu plus la mise en place de différentes directions. 11. BASICS : 06 défilement horizontal et vertical: Examinons un peu plus en détail les différentes directions de défilement de Figma. Nous voulons donc examiner la verticale, l'horizontale et la combinaison des deux. Commençons par la verticale, qui est également la plus courante. N'oubliez pas que pour chacun d'entre eux, pour que le défilement fonctionne, vous devez disposer d'un contenu découpé. Cela signifie que vous avez besoin d'un contenu qui dépasse votre cadre. Donc, si tel est le cas, accédez simplement à votre onglet de prototypage. Et sous le défilement par débordement, réglez ce paramètre sur le défilement vertical. Si nous passons maintenant en mode présentation, tout sera défilable. Comme nous l'avons déjà appris, nous pouvons également sélectionner certains éléments, revenir à la section Conception et les fixer en position. Donc, si nous revenons en mode aperçu, vous pouvez voir que maintenant l'en-tête sera corrigé et que seul un corps pourra défiler. Donc, jusqu'à présent, chaque fois que nous avons eu affaire à du contenu défilant, nous l'avons ajouté au cadre parent. Mais l'avantage de Figma est que nous pouvons l'ajouter à n'importe quel cadre imbriqué. Alors laissez-moi vous montrer la différence. Tout d'abord, sélectionnons le cadre parent ici. Jim, revenez au prototype et désactivez défilement vertical pour pouvoir simplement le remettre sur l'absence de défilement. Maintenant, au lieu du cadre parent, je vais sélectionner le cadre imbriqué ici, donc le groupe de cartes, et je vais le régler sur le défilement vertical. Passons donc à notre mode de prévisualisation et voyons si cela fonctionne. Eh bien. Cela ne fonctionne pas vraiment, c' est là qu'il y a peu de mouvement de saut, mais il ne s'agit pas de faire défiler ce contenu. Voyons donc pourquoi. Rappelez-vous maintenant que nous devons découper du contenu, donc un contenu plus grand que le cadre. Pour que le défilement fonctionne. Revenons à notre onglet Design. Nous pouvons voir ici que sur le cadre parent, c'était vrai, notre groupe de cartes était plus grand que le cadre, par conséquent, il a commencé à défiler. Mais maintenant, nous appliquons le défilement à ce cadre imbriqué. Et vous pouvez voir que cela ne va pas être coupé, car le cadre qui l' entoure contient en fait tout le contenu en un seul. Donc, ce que je peux faire maintenant, c'est sélectionner ce cadre et je peux maintenant redimensionner le cadre. Assurez-vous d'activer le contenu du clip. Vous pouvez donc constater que votre cadre est en fait plus petit que votre contenu. Et je peux maintenant l'ajuster jusqu' au bas de mon cadre apparent. Alors maintenant, réessayons-le. Appuyez sur Play et vous pouvez voir que seul le groupe de cartes peut désormais défiler. Notez que la barre de recherche et tout le reste restent en place. comprendre que vous pouvez appliquer le comportement de défilement au cadre parent Il est très important de comprendre que vous pouvez appliquer le comportement de défilement au cadre parent ou au cadre imbriqué pour exploiter toute la puissance du prototypage. Jetons un coup d'œil au défilement horizontal. Encore une fois, nous devons sélectionner le cadre imbriqué, car si j'appliquais le défilement au cadre parent, cela ferait défiler l'ensemble du cadre. Mais je voulais uniquement cette partie du groupe de cartes qui contient des cartes empilées horizontalement. Essayons maintenant la même chose qu'avant. Sélectionnez simplement ce groupe, accédez au prototype et passez au défilement horizontal. Si j'appuie maintenant sur Aperçu, encore une fois, cela ne marchera pas et ça va juste me donner un comportement nerveux. Faisons donc comme nous l'avons fait avec le défilement vertical. Nous allons sélectionner un groupe. Revenez à la section Design et découvrez ce qui se passe avec le contenu découpé. Je peux en fait déclipser le cadre parent et vous pouvez alors voir la taille complète du groupe imbriqué. Comme vous pouvez le constater, ce cadre a la taille qui inclut toutes les cartes et rien ne peut être coupé. Encore une fois, je vais simplement sélectionner ce cadre et le redimensionner. Maintenant, si je bascule le contenu extrait, vous pouvez voir le contenu masqué. Maintenant, mon contenu est plus grand que mon cadre. Appuyons à nouveau sur le bouton Play. Et vous pouvez voir que maintenant mon défilement horizontal fonctionne. D'accord, le dernier combine le défilement horizontal et vertical. Il s'agit d'un comportement typique que vous souhaiteriez voir apparaître sur une carte ou quelque chose comme ça. Donc, si je détache le contenu de cette carte, vous pouvez voir qu'elle est en fait beaucoup plus grande que le cadre. Je sélectionne donc cette carte, qui est un cadre imbriqué. Accédez au prototype et sélectionnez le défilement horizontal et vertical. Maintenant que le contenu est déjà plus volumineux, je n'ai rien d'autre à faire. Il suffit de sélectionner le cadre parent, puis de cliquer sur Play. Vous pouvez voir que vous pouvez déplacer la carte. Et comme nous appliquons leur comportement à ces éléments imbriqués, nous pouvons les combiner. Nous pouvons donc en avoir un défilement horizontal et vertical. Ensuite, nous pouvons ajouter un comportement complètement différent au cadre parent, par exemple , ajoutons un défilement vertical. Maintenant, comme vous pouvez le voir, cela est toujours en place, mais je peux également faire défiler l'ensemble du contenu. Comme vous pouvez le constater, l'application de ce comportement à des images imbriquées permet tirer pleinement parti de la puissance d' un mélange de comportements différents lors du prototypage. 12. BASICS : 07 écrans de liaison: Lier les écrans à Figma est en fait très simple. J'ai donc ici un exemple simple. Sur cet écran d'accueil. J'ai des formes de couleurs différentes. Et une fois que j'ai cliqué sur l'une de ces formes colorées, je voulais accéder à la page de détail de chaque couleur. Assurez-vous que vous êtes en mode prototype , puis sélectionnez n'importe quel cadre de forme. Un texte, peu importe. Une fois que vous le survolez, vous verrez apparaître ces petites bulles. Vous pouvez simplement choisir n'importe quelle bulle. Peu importe le côté que vous choisissez. Maintenant, faites glisser un connecteur et attachez-le simplement au cadre auquel il voulait être connecté et lâchez-le. Et c'est tout. Figma ouvrira automatiquement le panneau des détails de l'interaction pour vous et pourra personnaliser davantage votre interaction. Tu peux le faire tout de suite. Ou s'il est fermé, cliquez simplement 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. Voici donc la partie supérieure de ce panneau. Onclick est notre déclencheur vers lequel vous pouvez accéder. La destination est notre cadre appelé Orange. Maintenant, je peux modifier l'action du déclencheur et estimation en cliquant simplement dessus. Je pouvais donc passer au déclencheur d'un clic à l'autre, en passant le curseur de la souris, etc. Si nous voulons changer d'écran, ce sera généralement OnClick. Je vais donc en rester là pour le moment et nous apprendrons à connaître les autres plus tard. Mon action est de naviguer vers. Figma me donne également la possibilité d'échanger des superpositions, de les fermer, de les ouvrir, etc. Revenez en arrière, faites défiler aux liens ouverts et nous allons y jeter un œil dans une minute. 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 aurez affaire à plus 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. Vous trouverez ci-dessous la partie animation. C'est ainsi que nos objets animés finissent par se comporter une fois que l' interaction se produit. C'est la partie la plus sophistiquée, la partie travail qui a créé tout ce comportement magique. Les choses se transforment l'une en l'autre et ainsi de suite. Nous allons maintenant examiner plus en détail, en particulier Smart Animate. Cependant, juste un mot de prudence, 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 qu'il suffit parfois d' un clic et de Figma, c'est en fait assez difficile à configurer et à utiliser du CSS. Donc, pour que les choses soient un peu plus douces, je vais me concentrer sur l'âme. Il peut régler 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 le laisser tranquille pour le moment, ce qui est plutôt sympa. Jetons un coup d'œil à ce à 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 14. OK, alors appuyons sur Play. Ici, je vois mon écran d'accueil et si je clique maintenant sur ma forme orange, je peux voir qu'elle accède à la sous-page. Cependant, si je clique sur un sac, rien ne se passe. Configurons donc également les autres interactions. Revenons donc à notre fichier Figma. Et ici, tout d'abord, je vais relier les autres formes de dents. Je vais donc simplement sortir un connecteur. Et vous pouvez voir que Figma a enregistré les préréglages que je viens d' utiliser pour le préréglage orange. C'est donc très agréable et utile en général. Maintenant, ce que je veux aussi faire, que si je clique sur Retour, je veux revenir à l'écran d'accueil. C'est donc pareil sur l' onglet, naviguez vers l'accueil. Et je peux m'en tenir au même comportement. Je vais donc le faire pour les deux autres. Au fait, si vous vous demandez pourquoi il est écrit « Tab and click », c'est simplement parce que j'ai changé l'appareil en iPhone. L'action fonctionne toujours de la même manière. Jetons donc un coup d' œil à notre prototype. Et cela fonctionne parfaitement. 13. BASICS : 08 L'action arrière: Parlons du backaction, car cela peut réellement vous aider à simplifier considérablement nos prototypes. Voici donc un exemple où je clique sur l'une des formes, puis je passe à la page de détails. Si je veux revenir en arrière, j'ai un bouton de retour en haut. Et encore une fois, il renvoie à la page principale. Maintenant, cela fonctionne très bien et vous pouvez absolument l'utiliser comme ça. Mais il existe un moyen de vous débarrasser de toutes ces connexions supplémentaires. Sélectionnez notre bouton de retour ici, puis ouvrons notre menu interactif. Ici, je peux dire onclick. Et d'ailleurs, si vous définissez votre prototype ici, cela changera. Deux en plus. Laisse-moi juste te montrer que c'est exactement pareil. C'est juste que si vous définissez un prototype cela changera le libellé. Donc, cliquez sur un bouton ou sur un onglet au lieu d'une navigation, pour simplement choisir à nouveau dans le menu Action. Cela va maintenant revenir au cadre précédemment ouvert. Jetons donc un coup d'œil à cela dans notre mode présentation. Et je peux voir que si je clique ici, j'arrive à la page de détails, je clique sur Retour et je reviens simplement ici. Donc, c'est comme si j'avais une connexion directe. Maintenant, un petit conseil, je peux maintenant les sélectionner tous et les remettre manuellement en arrière. Ou je peux simplement supprimer les connexions, puis configurer celle-ci ici, la copier et simplement coller le comportement sur n'importe quel autre élément. Cela fonctionne parce que je suis en mode prototypage. Si j'étais en mode design, je copierais simplement l'élément entier. Maintenant, le retour en arrière est fantastique, mais ne le confondez pas avec un bouton d'accueil. En effet, au fur et à mesure que votre conception devient plus complexe, pouvez accéder au même écran à différents endroits vous pouvez accéder au même écran à différents endroits. Par conséquent, le retour en arrière est vraiment là pour toujours revenir au dernier écran visité. Et ce n'est pas nécessairement votre écran d'accueil. 14. BASICS : 09 Scrollto: Jusqu'à présent, nous avons uniquement créé liens externes vers des cadres externes, mais nous pouvons également créer un lien vers un élément situé dans le même cadre. Donc, dans mon exemple, découpons simplement le contenu. Vous pouvez voir que j' ai ici un carré noir. Donc, ce que je veux, c'est que si je clique sur ce cercle noir, il défile vers le bas jusqu'au carré noir. Passons donc au mode prototype. Ensuite, je vais simplement connecter mon cercle, non pas à un écran extérieur, mais au carré du même cadre dans le panneau d'interaction. Vous pouvez le voir en un clic. Et encore une fois, c'est la même chose que sur l'onglet. Si vous avez un ensemble de prototypes, faites également défiler la page. Il s'agit donc simplement d'une action ici. Et puis faites défiler la page jusqu'à moi. J'ai simplement donné un nom à un parchemin carré. Maintenant, vous avez ici des décalages que vous pouvez également définir et nous allons voir pourquoi nous en avons besoin dans une seconde. Et comme pour tout autre produit, vous pouvez choisir l' instantané ou l'animer. Je vais opter pour Animate parce que cela va lui donner jolies petites limites qui, vous savez, laisseront à l' aise pour le moment. Jetons un coup d'œil à notre mode de prévisualisation. Donc, si je clique sur le cercle, il défile vers le bas jusqu'à mon carré noir. Donc, l'endroit où vous allez voir qu'il y en a beaucoup, c'est une page ou un site Web où vous avez une navigation qui ne renvoie pas à des pages distinctes, mais à deux sections de la page. Déclipsons donc le contenu ici. Et vous pouvez voir que c' est un peu en dessous. Et il aura ma section À propos et ma nouvelle section. Ce que je veux faire maintenant, c'est accéder à la section « À propos » du menu, passer au prototypage, puis connecter ce menu de navigation à la section. Et je vais faire de même pour les actualités. Jetons donc un coup d'œil dans notre mode de prévisualisation pour savoir si cela va fonctionner. Je clique donc sur À propos d' Annette en faisant défiler la page vers le bas, et si je clique sur de nouveaux ensembles, cela fonctionne également. Mais il y a deux choses que je n'ai pas aimées là-dedans. Tout d'abord, j' ai un menu fixe, donc il couvre en quelque sorte ma section À propos. De plus, si je clique sur le blog, je dois monter car je ne veux pas revenir en arrière. Je veux le même comportement. Pour en revenir à mon design, je souhaite tout d'abord connecter le blog. Je connecte le blog à mon groupe de cartes ici. Maintenant, je veux corriger ces décalages. Je sais que je vais ajouter un peu de décalage ici, mais je ne connais pas encore les valeurs. Donc, à peu près, mon problème était la hauteur du menu. Vérifions-le donc. Et la hauteur ici est de 90. Passons donc au menu. Revenons en mode prototypage. Et je vais ajouter un décalage de -90. Et je dois ajouter -90. 90 car sinon cela le pousserait encore plus bas. Je voulais monter. C'est pourquoi j'ajoute une valeur négative. Et je vais faire de même pour les actualités. D'ailleurs, vous pouvez également maintenir les Shift et Command enfoncées et en sélectionner plusieurs. Je pourrais donc aussi simplement ajouter la même valeur une fois ici et l'avoir pour les deux. Maintenant, avec un blog, je ne veux pas 90 parce que je voulais essentiellement revenir au sommet. Donc, ce que je vais faire, c'est zoomer un peu ici. Et je vais mesurer la valeur de cette valeur. Donc, du haut de ma section, le point de départ est 220. Donc, dans ce cas, je vais ajouter un décalage de -220. Voyons si cela fonctionne. Cliquons donc sur Blog. Et oui, nous montons à fond. Ensuite, about défile bien vers le bas et les actualités fonctionnent également. 15. BASICS : 10 superpositions: Jetons un coup d'œil aux superpositions et à Figma. Un menu est donc un exemple parfait de superposition. C'est donc essentiellement son propre cadre. Mais si nous cliquons, par exemple , sur travailler, nous ne voulons pas que l'ensemble du cadre modifie ce menu, mais nous voulons que le menu apparaisse en dessous de notre navigation ici. Nous les avons à peu près configurés comme n'importe quelle autre connexion. Nous allons donc sélectionner Work. Lien vers le menu. Et maintenant, en cliquant, au lieu de naviguer vers, nous choisissons Ouvrir la superposition, le menu de superposition. Je peux maintenant choisir le poste. Donc au centre, en haut, à gauche, en bas, etc. par rapport au cadre parent. Ou je peux aussi choisir le manuel, ce dont j'aurais besoin ici. Je peux maintenant voir ce petit aperçu de ma superposition et je peux la 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 quel endroit aux alentours. Et je pourrais ajouter un arrière-plan pour le menu qui n'a pas vraiment de sens. Alors je le laisse. Et comme d'habitude, je peux choisir mon animation. Je vais donc le dissoudre aussi longtemps que d'habitude. Voyons à quoi cela ressemblera . Appuyons sur Play. Et je peux voir que si je clique sur travailler, mon menu apparaît. Si je clique à nouveau sur l'œuvre ou n'importe où sur la toile, disparaîtra à nouveau. Je peux donc simplement connecter l'un de ces sous-menus ici à un nouvel écran. Regardons un autre exemple. Lorsque je clique sur le bouton d' abonnement, je souhaite ouvrir une fenêtre qui permet aux visiteurs de s'abonner à la newsletter. OK, sélectionnons le bouton d' abonnement et associons-le à la superposition, puis ouvrons la superposition en cliquant dessus. Je veux le garder centré et je voulais le fermer lorsque je clique à l'extérieur, car je n' ai pas d'icône de fermeture ici. Je devrais l'avoir pour une meilleure facilité d'utilisation, mais nous allons simplement cliquer à l'extérieur pour cet exercice. Je souhaite également ajouter un arrière-plan. En fait, je vais opter pour une teinte un peu plus foncée, donc à 50 %. OK, jetons un coup d'œil. Voici donc mon écran. Je clique sur S'abonner et la superposition s'ouvre. Si je clique ailleurs, il se fermera à nouveau. Je dois maintenant suivre quelques étapes supplémentaires fur et à mesure que mes visiteurs ajoutent leur adresse e-mail. Donc, dès que quelqu'un clique ici, je vais dire que dès que quelqu'un clique dans le champ d'adresse, je vais faire semblant qu'il est rempli. Je vais donc échanger la superposition avec cette superposition pour. Ensuite, dès qu'ils cliqueront sur le bouton Envoyer ici, encore une fois, je vais échanger la superposition, et je veux juste que cela passe à cet écran de confirmation ici. Cela confirme donc simplement que tout a été envoyé, mais je ne veux pas que le visiteur ait à effectuer une autre action. Donc, ce que je vais faire ici c'est reconnecter ça pour l'instant à ici et le dire après délai. Donc, aucune action n'est requise après un délai de, disons que je vais juste mettre 2 s. Il va revenir en arrière alors que je vais juste régler ceci pour fermer cette superposition. OK, voyons si cela fonctionne. Cliquez donc sur s'abonner. Ensuite, j'ajoute mon e-mail, c'est parti. Et après 2 s, il n'y a plus de superposition. Il y a juste une chose que je n'aime pas si je clique ici, que si je change de superposition, tu peux voir ces petits clignotements. Et c'est parce que je l'utilise ici et qu'il y a un délai de 300 millisecondes. Je vais passer à Instant. Et maintenant, revenons en arrière et jetons un coup d'œil. Et cela devrait résoudre le problème. Superposition parfaite réalisée. 16. BASICS : 11 Liens vers des pages externes: Avec le prototypage figma, vous pouvez uniquement créer des liens vers d'autres pages de votre conception, mais également vers des pages externes. Disons donc que dans ma navigation, tout est lié à mon design, sauf le blog ici. Je veux lier cela à un bloc externe existant. Donc, une façon de le faire est simplement de sélectionner ceci. S'il s'agit d'un élément de texte, cliquez sur le lien ci-dessus et collez l'URL. Si je regarde cela en mode présentation, vous pouvez voir qu' il s'agit désormais d'un lien. Et si je clique dessus, le site Web s'ouvre. Si vous souhaitez avoir un autre style de lien ce n'est pas un problème. Sélectionnez simplement le texte, puis votre menu de texte, vous pouvez le modifier selon vos besoins. Maintenant, cela fonctionne très bien pour le texte. Mais le fait est que si j' ai par exemple un autre élément, disons que j'ai cette carte que je souhaite lier à un article de blog, alors je n'ai pas la possibilité de le lier car ce n'est pas un texte. Ce que je pourrais faire, c'est utiliser mon menu de prototypage. Maintenant que cette carte est sélectionnée, passons à l'onglet prototypage. Maintenant, je vais cliquer sur plus à côté de l'interaction. Cela ouvre donc une nouvelle interaction. Si je clique à nouveau dessus, leur fenêtre d' interaction s'ouvre. Maintenant, je vais laisser cela à Qlik pour le moment. Mais vous pouvez déjà voir que cela me donne également l'avantage pouvoir ouvrir un lien externe avec n'importe quelle autre action, comme appuyer sur une touche spécifique de mon clavier, entrer la souris, etc. Ensuite, pour la direction, je vais ajouter un lien ouvert tout en bas de mon menu. Et maintenant, je peux simplement copier le lien que je voulais ouvrir. En mode présentation. Si je clique sur cette carte, je vais maintenant être redirigé vers la page externe. Et d'ailleurs, cela fonctionne également dans l'autre sens. Vous pouvez également copier le lien de partage du prototypage. Vous pouvez le faire via le menu ou simplement appuyer sur commande L, puis créer un lien vers votre prototype depuis n'importe quelle page externe. C'est également un très bon moyen de lier des prototypes qui se trouvent dans différents fichiers ou sur différentes pages. 17. BASICS : 12 déclencheurs d'action: Examinons de plus près les différents déclencheurs de l'animation. Nous avons donc ici notre configuration standard que nous avons également utilisée jusqu'à présent. Et cela fonctionne parfaitement si nous voulons simplement créer un prototype cliquable. Nous utilisons donc ici onclick et nous naviguons vers une nouvelle destination, qui serait notre écran de détail. Maintenant, avec cette petite liste déroulante, nous pouvons voir d'autres options. Donc, la traînée est quelque chose qui, dans ce cas, n'aurait pas beaucoup de sens. Le glisser-déposer est donc quelque chose que l'on trouve beaucoup sur les écrans mobiles. Donc, ici, par exemple, nous avons ce basculement entre les articles et les vidéos. C'est pourquoi j'utilise on drag. Donc, si je fais glisser le pointeur ici, alors je vais voir l'écran. Et cela est généralement associé à une animation push, dont nous parlerons plus tard. Donc, l'inaction, ce sera quelque chose comme ça. Je les glissais d'un côté accéder aux vidéos et je les glissais ici pour accéder aux articles. Ensuite, nous avons de nombreuses interactions, comme souris et la souris, laisser la souris enfoncée, la souris vers haut, et aussi lorsque vous survolez le pointeur et que appuyez dessus, cela fait partie de cela. Il s'agit en fait de toutes vos différentes interactions avec la souris. Disons simplement que la souris entre , puis navigue vers ce nouvel écran. Cela fonctionnerait également ici. Alors, en entrant, je suis passé au nouvel écran, mais cela n'aurait pas beaucoup de sens. Donc, un endroit où vous pouvez l'utiliser et nous allons avoir un chapitre entier à ce sujet est celui des composants interactifs. Voici donc les composants définis avec deux variantes, un bouton puis je dis en survolant ou disons simplement en saisissant la souris. Et il est en fait utilisé en vol stationnaire. J'utilise Smart Animate ici, ce que nous aborderons également plus tard. Et vous verrez qu' il ne navigue pas, mais qu'il change également car il se trouve à l' intérieur de cet ensemble de composants. Je peux maintenant extraire une instance. Dessinons simplement un cadre autour lui pour mieux le voir. Maintenant, lorsque nous appuyons sur Play, nous pouvons voir que voici mon bouton et que lorsque je le survole, il produit un joli petit effet de survol. Un déclencheur très peu utilisé était en fait très impressionnant, c'est le déclencheur du clavier. Donc, pour vous montrer un exemple, j'ai ici une barre de recherche et onclick qui vont être remplies. C'est aussi quelque chose que nous résolvons généralement avec des composants interactifs, mais restons-en à une version simplifiée pour le moment. Maintenant, je sélectionne ce champ dans le formulaire, maintenant que j'appuie sur Entrée, je veux que cela passe au résultat. Donc, ce que je peux dire, c'est qu' au lieu de OnClick, je dis touche ou manette de jeu. Et maintenant, sélectionnez simplement ce champ ici, puis appuyez sur n'importe quelle touche de votre clavier pour l'enregistrer. Donc, dans mon cas, Enter, j'aurais également pu appuyer sur un , par exemple , pour naviguer ici et vous pouvez également choisir l'animation. Faisons donc une animation de dissolution. Voyons donc cela en action. Ici. Je clique sur Rechercher. Maintenant je l'ai rempli. Et maintenant, lorsque j'appuie sur Entrée sur mon clavier, ce que vous ne voyez pas, cela me donne les résultats du test. La dernière que je veux vous montrer est After Retard. Et il se peut que vous ne l'ayez pas toujours pour toutes les situations. Mais si c'est le cas, vous le trouverez ici après un certain temps. Et cela passe simplement de cet écran à l'autre après un certain délai. Et cela devient vraiment puissant lorsque nous en apprendrons plus tard sur Smart Animate. Jetons donc un coup d'œil ici. Nous pouvons régler la vitesse. Réglons cette valeur sur 2 s afin que nous puissions vraiment voir notre délai. Et appuyons sur Play. Vous pouvez voir qu'il prend son délai , puis change d'écran. Et c'est aussi très agréable car vous pouvez l'enchaîner pour pouvoir effectuer différentes actions. Ou vous pouvez également configurer quelque chose comme un problème de newsletter qui apparaîtrait après un certain temps. 18. BASICS : 13 options d'animation Figma: Passons en revue les différentes animations disponibles dans Figma. Commençons par la première , qui est instantanée, et il s'agit en fait de votre animation par défaut. En fait, je n'utilise pas beaucoup celui-ci, mais un bon exemple où je l'utilise est une info-bulle. Donc, ici, j'ai une icône d'information si je passe la souris dessus. Disons donc ce qui plane. Je veux ouvrir une superposition et je vais l'ouvrir instantanément. Et laissez-moi simplement positionner mon incrustation ici. Et maintenant, jetons-y un coup d'œil. Donc , lorsque je le survolais, cela apparaîtrait instantanément. Et j'ai aimé le fait d'être innocente et de ne pas tarder car pensez à la rapidité avec laquelle les gens déplacent leur souris. Vous voulez donc vraiment qu'ils remarquent qu'il y a encore quelque chose à explorer. Un autre que j' utilise probablement le plus est le second. C'est donc ici sur ma liste. Dissolvez, le sel disparaîtra lentement dans le nouveau cadre. Vous remarquerez également que vous avez plus d'options. Vous pouvez choisir la façon dont cela facilitera l'entrée et la sortie, ainsi que le temps que cela prendra. Donc, si je mets celui-ci ici, pour qu'il soit en millisecondes, réglons-le sur 5 000, donc ce serait très lent. Et jetons un coup d'œil à ça. Cliquons donc dessus et vous pouvez voir cette transition très lente se produire vers la nouvelle page. Maintenant, lorsque vous commencez à ajouter des animations pour changer de page, il est très tentant d'ajouter un nombre élevé ici et de lui donner un aspect un peu plus magique. Mais surtout lorsque vous naviguez entre différentes pages, je vous recommande de le laisser autour de ce paramètre par défaut de 300. Parce que pensez à la façon dont les gens naviguent sur votre page. Ils veulent passer rapidement à différentes sections. Ce sera donc un véritable obstacle que de toujours attendre une transition lente. Jetons un coup d'œil à ce que nous avons d'autre ici. Le suivant est Smart Animate, et celui-ci est très magique. Smart Animate recherche les couches correspondantes entre votre image d'origine et la destination finale. Il reconnaît le changement, puis applique une animation fluide. Parce que c'est tellement puissant et très important lorsqu'il s'agit d'animation et de Figma, j'ai un chapitre à part entière sur Smart Animate. Mais juste pour vous donner un petit aperçu, prenons ce cadre et dupliquons-le car nous avons besoin de cadres vraiment identiques. Et puis ce que je vais faire ici, c'est configurer une mise en page automatique. Je vais juste empiler ces images ici. Je vais donc sélectionner l'ensemble de ce groupe connecté par un cadre. Et si je clique dessus, je veux accéder à l'autre image avec Smart Animate. Et je l'ai dit, j'en ai embauché 800, pour que nous puissions le voir correctement. Appuyons donc sur Play. Et je peux voir ici ma pile d'images. Si je clique dessus, il y a une belle transition. Vous pouvez animer intelligemment entre différentes couleurs, différentes tailles, positions, et c'est vraiment très puissant. Regardons notre dernière transition, et voici les transitions mouvantes et vous les trouverez ici. Nous devons entrer, sortir, pousser, glisser vers l'intérieur et glisser vers l'extérieur. Remarquez qu'avec ces transitions mouvantes, vous avez ces petites flèches sur le côté droit et vous pouvez choisir la direction dans laquelle vous souhaitez qu'elles se déplacent. Donc, du haut, du bas, gauche ou de la droite, entrez et sortez. En gros, c'est un cadre coulissant dans et hors de la vue. C'est donc très bien pour créer une hiérarchie. Push est très similaire au déplacement vers l'intérieur et vers l'extérieur, mais cela pousse le cadre au même niveau. fonctions Slide in et Slide Out sont encore une fois très similaires, mais elles décalent légèrement les cadres au fur et à mesure qu'elles se dissolvent, tandis que le mouvement reste immobile. Le mieux est de simplement jouer avec eux. 19. BASICS : 15 sections et conception stateful: Les sections de Figma sont un excellent moyen de mieux organiser notre design et de créer un design dynamique. Voyons ce que cela signifie. Donc, dans mon exemple, j'ai un écran d'accueil. Et sur cet écran d'accueil, je peux appuyer un bouton d'inscription qui m'indique ensuite d'inscription qui m'indique ensuite le processus d'inscription. Je peux donc choisir le plan que je souhaite avoir, ajouter mes informations personnelles, choisir un mode de paiement. Et puis au final , tout est confirmé. Jetons un coup d'œil au prototype actuel. Voici donc la maison. Je clique sur, S'inscrire. Je peux ensuite choisir n'importe quel plan. J'ajoute mes coordonnées. Je m'inscris, je choisis un paiement et c'est confirmé. Maintenant, tout semble bien. Mais disons que je commence le processus. Et puis, au cours du processus, à un moment donné, je ferme ma superposition. Maintenant, après un certain temps, je veux revenir et terminer mon inscription. Cependant, si je clique ici, je vais toujours être redirigé vers le tout premier écran. Maintenant, je ne veux pas cela, je veux revenir à cet écran où nous étions à gauche et conserver toutes les informations que j'ai déjà ajoutées. C'est ce qu'on appelle un design dynamique. Cependant, si nous examinons notre dossier, il est impossible que Figma se souvienne de l'endroit où je suis parti. Il existe cependant un moyen de contourner ce problème, et c'est là que les sections entrent en jeu. Vous trouverez des sections ici, dans le menu des cadres. Ou vous pouvez simplement utiliser le raccourci Shift S. Tout comme un cadre. Vous pouvez dessiner une section autour d'un groupe de cadres. Nous pouvons maintenant nommer cette section, appelons-la enregistrement. Et si vous passez à l'onglet Design, vous pouvez également modifier la couleur de la section. Comme vous le verrez ici, vous bénéficiez de certaines fonctionnalités de base, mais pas de contraintes de mise en page automatique et d'autres fonctionnalités que vous pourriez voir avec les cadres. Les sections ne sont donc là que pour organiser. Les sections sont également ignorées par le mode présentation. Donc, si je choisis une section et que j'appuie sur Play, le premier écran de cette section s'affichera toujours . OK, super. Il ne nous reste plus qu'à faire quelques ajustements. Revenons donc au prototypage. Et ce que je veux faire, c'est je ne veux pas que cette inscription ici se connecte au premier écran, mais je voulais me connecter à l'ensemble de la section. Je suis donc en train de configurer un nouveau connecteur et je dis sur l'onglet, naviguez vers, et je laisse cela et navigue vers la section. J'ai besoin d'utiliser. Naviguer pour ouvrir une superposition avec une section ne fonctionnera pas même si, dans la section, je peux continuer à utiliser des superpositions. Et maintenant, une dernière chose que je dois faire, qui est un peu confuse, c'est de sélectionner tous les boutons de mes vêtements ici. Et je vais les faire passer de la superposition rapprochée à l'arrière. Cela va me permettre de revenir à mon écran d'origine. Vous pouvez également les connecter directement à un écran sans problème. Jetons donc un coup d' œil au prototype. Nous avons donc notre maison, nous nous inscrivons, nous choisissons n'importe quel plan, remplissons nos coordonnées. Et puis, au moment du paiement, nous clôturons. Et puis au bout d'un moment, nous y retournons. Et vous pouvez voir qu' il se souvient exactement de l' endroit où nous sommes partis et que nous pouvons continuer à partir d'ici. Maintenant que nous travaillons sur notre application, nous ajoutons de nouvelles zones. Nous avons peut-être d'autres boutons d'inscription provenant d'autres endroits, mais ce n'est pas un problème. Nous pouvons simplement les connecter à la même section. Maintenant, la seule chose que nous devons changer, c'est qu'une fois que nous avons terminé un processus, nous ne voulons peut-être pas rentrer chez nous, mais nous pouvons également vouloir simplement le remettre arrière et donc revenir à n'importe quel cadre d'où nous venons. Voyons si cela fonctionne. Je commence donc le processus d'inscription depuis chez moi. J'ai déjà ajouté quelques détails, mais je ferme ensuite mon overlay. Je navigue plus loin dans mon application. Et puis, depuis un autre endroit, je rentre et vous pouvez voir qu'il se souvient où je suis parti et que je peux simplement terminer à partir d'ici. 20. BASICS : 14 animations de printemps: Jetons un coup d'œil aux différentes animations d'assouplissement et de printemps. L'accélération détermine l'accélération d'une transition entre deux images-clés. Il peut s'agir de la transition d'un écran à l'autre ou d'une transition entre des objets individuels. Par exemple, changer de couleur ou de taille lorsque vous cliquez. Vous verrez que les transitions sont généralement représentées par des graphiques dans lesquels le temps est l' axe X et la transition, telle que le déplacement, le glissement ou tout ce que vous utilisez, est l'axe Y. linéaire est l' accélération par défaut et il s'agit simplement d'une ligne droite sur votre graphique. Cela signifie donc qu'il se déplacera simplement à une vitesse constante. Figma possède de nombreux préréglages intégrés que vous pouvez utiliser. Si nous passons du mode linéaire au mode Ease In, par exemple vous pouvez voir que l'animation commence lentement, puis s'accélère vers la fin. Voici donc un aperçu de toutes les animations intégrées et de Figma. Ce ne sont donc que des exemples et vous pouvez voir que je les ai tous configurés ici. Regardons ici cet exemple qui entre et sort. J'ai donc réglé le déclencheur sur After Delay. Ensuite, il s' animera intelligemment et utilisera la facilité d'animation d'entrée et de sortie. Et j'ai juste dit 1 s pour qu'on puisse le voir un peu mieux. Et une fois que c'est fait, la même chose se produit à nouveau à l'envers. Bon, revenons à notre aperçu que nous trouvons ici. Et je vais simplement sélectionner ce cadre et appuyer sur Play. Maintenant, assurons-nous de régler cela pour qu'il corresponde à la largeur afin de pouvoir tous les voir. Et je peux voir les différentes animations les unes à côté des autres. Il n'y a pas une animation qui soit bonne ou mauvaise. Il s'agit vraiment de ce que vous essayez de construire. Que voyez-vous ici ? Doux, rapide, dynamique et lent. En fait, les animations dites printanières. La différence entre l' accélération et l'animation printanière devient un peu plus claire lorsque nous examinons les options personnalisées et Figma. Vous pouvez voir ici que lors de la dernière transition vers l'assouplissement, nous nous habituons de plus en plus. Et si nous choisissons cette option, vous pouvez voir que vous obtenez la courbe que vous pouvez désormais adapter à vos besoins. Mais ce sera vraiment toujours cette courbe. Maintenant, plus bas dans mes exemples, j'ai l'animation du printemps, puis je dois personnaliser les ressorts. Jetons donc un coup d'œil à cela. Tout comme la rigidité, qui correspond au nombre de rebonds auquel l'animation peut être ajustée. Je peux régler l'amortissement qui influence le niveau de ressort dans l'animation. Et je peux influencer la masse. Cela aura une influence sur la vitesse de l'animation et la hauteur des limites. Nous pouvons donc vraiment tracer cette courbe et y ajouter de nombreuses limites et beaucoup de mouvement. Voyons à quoi cela ressemble dans notre mode aperçu. Vous pouvez donc voir que vous obtenez ce joli petit rebondissement à la fin. La meilleure façon de les maîtriser est, comme d'habitude, se préparer et d'explorer. 21. BASICS : 16 flux dans Figma: Vous pouvez créer plusieurs flux dans Figma pour vous concentrer sur différents segments de votre prototype. C'est très simple. Laisse-moi te montrer. Si vous avez une configuration de conception avec des connexions, vous y trouverez au moins un flux. Figma configure automatiquement votre premier flux. Dès que vous dessinez votre premier connecteur. Vous pouvez simplement sélectionner ce flux et l'attacher à n'importe quel autre cadre de votre choix. Notez qu'il n'attache pas deux sections mais seulement deux cadres. Vous pouvez double-cliquer sur le flux pour le renommer. Vous pouvez également sélectionner n'importe quel autre cadre, puis simplement dans le panneau de prototypage en haut, cliquer sur plus et ajouter un autre flux. Appelons celui-ci notre maison. Si vous cliquez n'importe où sur votre canevas en mode prototypage, vous pouvez voir un aperçu de vos flux ici. Donc, pour l'instant, nous avons l'enregistrement et la page d'accueil, et notez cette commande. Appuyons donc sur Play et voyons ce que cela apporte à notre prototypage. Maintenant, sur le côté gauche, vous avez un petit menu que vous pouvez afficher ou masquer. Ici, le premier flux est l'enregistrement. Il va donc d'abord m'afficher l'écran. Si je clique sur Accueil, j'accède à l'écran d'accueil. Je peux toujours accéder à mon prototype comme avant. Mais cela permet à nos utilisateurs. Donc, si vous effectuez des tests utilisateur pour accéder à différentes régions de votre prototype. Sait comment nous pouvons également ajouter des descriptions. C'est vraiment pratique pour les tests. C'est un peu caché. Revenez donc dans notre fichier de conception, sélectionnez n'importe quel flux, puis vous obtenez cette petite icône de description modifiée sur le côté droit. Si vous cliquez dessus, vous pouvez ajouter du texte. Revenons maintenant au prototypage et vous pouvez voir que notre point commun était d'ajouter à ce flux spécifique. De retour dans notre dossier. Si vous cliquez sur le canevas, vous pouvez également réorganiser tous vos flux. Nous pourrions donc avoir la maison, par exemple , d' abord, si vous cliquez sur le petit cadre de sélection, il sautera. Montrez ce flux. C'est très pratique si vous avez configuré beaucoup de flux. Une autre chose est que vous pouvez partager un lien direct vers votre flux. Donc, si vous souhaitez que quelqu'un ouvre directement, par exemple lors du processus d'inscription, vous pouvez simplement copier le flux directement à partir d'ici. De plus, si vous cliquez sur Play dans une présentation, passerez directement à ce flux spécifique. Les flux sont vraiment un excellent moyen d' ajouter un peu de structure à votre prototype. Si vous partagez directement depuis le prototypage, cela aide les visiteurs à comprendre les différentes sections de votre conception et, grâce à des commentaires, vous pouvez les guider tout au long des tests généraux. 22. BASICS : 17 Ajouter des vidéos aux prototypes: Dans Figma, vous pouvez intégrer des vidéos. Sachez simplement que cela ne fonctionne que sur un plan payant. Ainsi, dans InDesign, il suffit de choisir n'importe quel remplissage, puis, dans le menu Remplir, de le sélectionner dans la vidéo déroulante. Vous verrez un aperçu de la vidéo, et vous verrez la petite miniature de la vidéo dans le panneau des calques. Pour que cela fonctionne, votre vidéo doit être au format MP4. Les cadeaux fonctionnent également d'ailleurs, et ils ne doivent pas dépasser 30 Mo. En tant que vidéos ou simplement en tant que remplissage de couche, vous pouvez également les modifier comme vous le feriez avec n'importe quel autre remplissage de couche. Vous pouvez modifier la taille, vous pouvez ajouter d'autres éléments en haut. Vous pouvez utiliser le recadrage du masque, etc. Pour voir la vidéo en cours de lecture, vous devez passer en mode présentation. Pour modifier les paramètres du lieu, sélectionnez la vidéo, accédez au panneau de prototypage. Et puis, ici, sur la vidéo, vous pouvez choisir si elle doit être lue automatiquement ou non, si elle doit être diffusée en boucle et vous pouvez choisir où le son doit être joué ou non. Pour vous éviter une certaine frustration, sachez que les vidéos ne sont actuellement pas prises en charge sur l'application mobile Figma. 23. BASICS : 18 Aperçu sur votre mobile: Figma dispose d'une application fantastique qui vous permet de prévisualiser vos prototypes sur votre mobile. Accédez au site Web de Figma et sur les produits, vous trouverez l'onglet téléchargements. Dans les 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 ouvrez 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 pour vos fichiers de travail. Sinon, le miroir ne fonctionnera pas. Vous verrez alors un aperçu des fichiers de votre compte. Cependant, regardez en bas à droite et cliquez sur miroir. Une fois que vous avez cliqué sur Commencer le miroir, cela reflétera n'importe quel cadre que vous sélectionnez à ce moment dans votre application de bureau. Tous les paramètres du prototype seront automatiquement visibles ici. J'adore l'ouvrir lorsque je travaille sur mes designs mobiles. Cela me permet de voir et de tester mon design de manière plus réaliste lors de la conception. Assurez-vous simplement que la taille du cadre sur lequel vous concevez correspond bien la taille du téléphone portable que vous utilisez. Donc, dans mon cas, j'ai un iPhone 14 physique, donc mon écran est également réglé sur ceux que j'ai mentionnés. L'application agrandira ou diminuera votre design, afin qu'il ait l'air réaliste même si vous utilisez une autre taille. Cependant, cela peut réellement entraîner des erreurs lorsqu'il s'agit, par exemple , de tester la taille des cibles tactiles. Vous pouvez également partager vos prototypes mobiles et, via le lien, vous assurer de copier le lien depuis la vue de présentation. Il s'ouvrira ensuite automatiquement dans l'application mobile Figma s'il est installé sur un téléphone. Encore une fois, assurez-vous qu'ici, la taille de votre prototype correspond à la taille physique du téléphone utilisé. Vous n'avez pas à vous soucier de la résolution dans ce cas, car le lien renvoie à Figma, qui s'occupe de cela. 24. SMART ANIMATE : 01 Comprendre smart intelligent: Jetons un coup d'œil à la partie magique du prototypage avec Figma, à savoir Smart Animate. Smart Animate prend donc les couches correspondantes entre les différentes images , puis reconnaît les différences et les anime entre elles. Jouons donc un peu avec ça. J'ai donc deux images et je vais simplement les connecter en réglant Smart Animate sur 2000 millisecondes ou secondes pour que nous puissions vraiment voir l'animation. Et je te rends la pareille pour que nous puissions cliquer entre eux. Donc, la première chose que je vais faire est vous montrer comment nous pouvons changer de position. Je déplace simplement mes formes. Maintenant, cliquons sur le mode présentation. Et vous pouvez voir qu' ils s' animeront bien jusqu'à leur nouvelle position. D'accord, voyons ce que nous pouvons faire d'autre. L'autre chose que nous pouvons faire est de modifier la taille. Je vais donc juste le réduire un peu plus bas. Et je vais également apporter quelques modifications ici. Je vais simplement agrandir ce triangle et le presser un peu. Et maintenant je vais le laisser comme ça. Et maintenant, jetons un coup d'œil. Je vais cliquer sur mon carré et vous pouvez voir qu'ils changent non seulement de position, mais aussi de taille. Maintenant, évidemment, ce que nous voulons également changer, c'est la couleur. Et nous pouvons simplement modifier le remplissage n'importe où entre nos différents cadres ici. Et il s'animera intelligemment entre les nouvelles couleurs. Cliquons donc ici. Et vous pouvez voir le logiciel de couleur passer d'une couleur à l'autre. Nous pouvons également adapter la rotation et c'est un très bel effet. Tu peux utiliser. Assurez-vous simplement de ne pas abuser de cet effet. Permettez-moi d'ajuster un peu cela et jetons un coup d'œil. Vous obtenez donc cette très belle torsion. Une dernière petite chose très pratique est que si vous voulez quelque chose ait l' air d'apparaître à partir de rien et que vous le mettez à zéro, vous en avez besoin sur le premier écran. Sinon, ça ne marchera pas. Mais si vous le mettez à zéro, il semblerait qu'il apparaisse de nulle part. Donc, dans Figma, des animations sophistiquées comme celle-ci en fait très simples à réaliser. Et c'est dans Figma, pas en CSS. Donc, tout ce dont nous avons vraiment besoin pour cela, c'est que, par exemple , pour ce menu tordu , nous avons ici un menu à deux lignes. Et puis notre croix est composée exactement des mêmes lignes. Il suffit de le retourner et de l'allonger un peu à une extrémité. Ensuite, notre arrière-plan qui apparaît est simplement un arrière-plan caché. Permettez-moi simplement de modifier l'opacité ici. Et vous pouvez voir qu'il s'agit simplement d'un carré qui s'agrandit en arrière-plan. Et je l'ai rendu invisible, donc on dirait que ça vient de rien. Ensuite, nos liens qui apparaissent apparaissent depuis la gauche. Si je les détache, vous pouvez voir qu'ils se trouvent sur le cadre, mais qu'ils sont déplacés en dehors de la zone visible. Et avec l'animation, il suffit revenir sur le cadre dans cette position. ne nous reste plus qu'à passer au prototypage , puis à connecter ce menu à notre nouvel écran. Et nous allons laisser le bouton « Smart Animate » activé. Et j'en ai 10 ici. Et puis, si je clique à nouveau sur le menu, reviendrai au cadre d'origine. Et c'est tout ce dont j'ai besoin pour créer cette animation sophistiquée. 25. SMART ANIMATE : 02 Animations animées et mobiles: Nous pouvons également combiner une animation intelligente avec des transitions mobiles. Dans mon exemple, vous voyez deux écrans, l'un contenant tous les articles et l'autre contenant toutes les vidéos en haut en tant que filtre. Maintenant, ce que je veux faire, c'est que si quelqu'un glisse vers la gauche plutôt que vers les vidéos ou cet endroit, et s'il glisse vers la droite, nous reviendrons aux articles. Je vais donc sélectionner la page de l'article , puis faire glisser un connecteur. Et je vais dire « on drag ». Et je veux que cela soit intégré. Je pourrais utiliser le mouvement et en fait, mais je vais opter pour la poussée dans ce cas et maintenant je dois considérer que je pousse vers la gauche. Je veux donc que cela se déplace vers la gauche. Maintenant, à partir de là, je vais faire de même, je vais connecter cela et je vais dire « on drag ». Et maintenant, je veux pousser vers la droite, puis afficher à nouveau les articles. Jetons donc un coup d'œil dans notre mode présentation, quoi cela ressemblerait. Je fais donc glisser le curseur vers la gauche et j'ai mes vidéos. Et si je reporte mes articles, ça a l'air plutôt sympa. Mais ce que je n'aime pas, c'est en haut, mes filtres s'échangent également. En fait, je veux qu'ils restent en place et qu'ils activent simplement le filtre correspondant. Si je reviens à mon design ici et que je sélectionne ma connexion, vous pouvez voir que dès que je choisis une sélection mobile, vous pouvez voir apparaître cette petite case à cocher appelée couches correspondantes Smart Animate. Et je vais l'activer. Et je dois faire de même pour la connexion renvoyant à mes articles. Voyons donc ce qui se passe maintenant. Si je glisse maintenant, vous pouvez voir que mon menu est intelligent le reste de mon design utilise toujours l'animation en mouvement. Pour que cela fonctionne, assurez-vous de vérifier deux choses. Tout d'abord, les éléments que vous souhaitez animer de manière intelligente, par exemple, dans mon cas, les filtres, sont configurés exactement de la même manière. Ils utilisent donc la même hiérarchie et utilisent exactement la même dénomination. La partie que je ne souhaite pas intégrer à Smart Animate porte un nom différent. Ce groupe s'appelle donc articles, et ce groupe, qui est en fait assez similaire au lieu d'un instructeur, s'appelle vidéos. 26. SMART ANIMATE : 03 Limitations de Limitations intelligent: Smart Animate est donc une véritable magie, mais elle comporte quelques limites. Comme nous l'avons appris, nous pouvons animer les couleurs, la taille, la position, la rotation, etc. Mais ce que nous ne pouvons pas animer, c'est passer d'une forme à une autre. Alors ici j'ai dessiné un carré et ici j'ai dessiné un cercle. Et maintenant, voyons ce qui se passerait si je pouvais l'animer intelligemment. Vous pouvez donc voir que lorsque je clique dessus, il s'anime toujours bien, mais qu'il ne prend pas vraiment la nouvelle forme. Dans ce cas précis, il y a une petite astuce que je pourrais utiliser. Je pourrais simplement sélectionner le carré, le copier, puis le coller à nouveau ici. Donc, au lieu de simplement dessiner un cercle, je vais transformer ce carré en cercle. Je vais donc utiliser des coins arrondis pour ce faire. Et maintenant, changeons simplement la couleur pour mieux voir cela. Et revenons au mode présentation. Maintenant que je clique, vous pouvez voir que cela fonctionne, mais cela ne fonctionnera que pour un carré se transformant en cercle si je veux le transformer en étoile ou en triangle, tout ce qui ne fonctionnera pas. Ce qui peut également vous poser des problèmes c'est si vous modifiez le nom. J'ai donc ici deux cadres contenant un groupe et un cadre. Donc celui-ci est le cadre, celui-ci est le groupe. Et ils ont un contenu identique. Si je l'anime intelligemment, vous pouvez voir que cela fonctionne parfaitement. Revenons maintenant en arrière et changeons le nom. Je vais donc appeler celui-ci groupe X. Et je vais appeler ce cadre ici, cadre y pour cela. Et maintenant, rejouons. Ainsi, même si la hiérarchie et tout le reste, toutes les dénominations au sein du groupe sont restées les mêmes, elles ne sont plus reconnues comme les mêmes. Et c'est également le cas. Si je conserve les mêmes noms de groupe et de cadre, mais que je change le nom du contenu. Et ajoutons simplement un petit x ici, à la fin, à l'endroit de chacun d'eux. Et maintenant, vous pouvez voir que lorsque j'anime à nouveau, le groupe lui-même qui s'anime, mais pas le contenu. Vous avez donc besoin de la même hiérarchie et dénomination pour que tout corresponde. Une petite astuce : si vous voulez voir si les choses sont configurées selon la même convention de dénomination et de hiérarchie pour être animées de manière intelligente, sélectionnez simplement n'importe quel élément et vous verrez dans les autres images lequel correspond. Donc, ici, vous pouvez voir que celui-ci correspond maintenant. Maintenant, si je change le nom et que nous le sélectionnons à nouveau, vous pouvez voir qu'il ne correspond plus. Revenons au nom d'origine. Et maintenant, ça reprend. C'est donc un très bon moyen, surtout si vous avez des centaines d'écrans pour vérifier rapidement si quelque chose ne va pas. Une autre limitation que vous pouvez rencontrer est que lorsque vous ouvrez une superposition, vous ne pouvez pas animer cette forme de manière intelligente. Donc, par exemple , ici, tout s'appelle ellipse 1 et tout a la même forme. Mais une fois que je dis « ouvrir la superposition en un clic », vous pouvez voir que dans le menu d'animation, je peux choisir entre incident et dissolution, mais je ne peux pas sélectionner Smart Animate. Ainsi, lors de l'ouverture et de la superposition, cette bulle ne peut pas faire croître cette bulle dans la bulle de la superposition. Cependant, une fois que les incrustations sont ouvertes et que je dois échanger des superpositions, vous pouvez constater qu'un Smart Animate est désormais actif. Alors laisse-moi te montrer. Voici donc mon écran d'accueil. Je clique sur mon cercle pour ouvrir la superposition, mais elle ne s'anime pas intelligemment. Mais maintenant, je suis sur la superposition, je suis juste en train d'échanger des superpositions. Et vous pouvez voir que Smart Animate fonctionne désormais. Une autre zone qui pourrait vous poser des problèmes est le remplissage d'arrière-plan avec des animations animées. Voici donc un exemple simple. Si je clique sur ce rectangle rouge, cette page détaillée est déplacée. Et si je clique sur x, cela le déplace vers l'extérieur. Et notez que Smart Animate n'est pas encore activé. Voyons donc à quoi cela ressemblerait. Donc, si je clique ici, ça le déplace vers l'intérieur, si je clique sur x, ça le déplace vers l'extérieur. air plutôt sympa. Mais ce que je veux faire maintenant, c'est que si je clique ici, je veux que le x reste en place et qu'il soit animé intelligemment avec le menu. C'est donc très simple. Il me suffit de sélectionner mes connecteurs et de configurer Smart Animate. Il suffit donc de prendre cette petite boîte ici. Mais si je le rejoue maintenant, vous pouvez voir que cela fonctionne pour le menu. Mais cette étrange transparence dans ma tradition. Pour résoudre ce problème, revenons ici et sélectionnons la page cible. Ensuite, je vais simplement appuyer sur R et dessiner un rectangle comme une sorte de deuxième arrière-plan. Et vous pouvez également le nommer. Le mieux est de nommer cette animation d' arrière-plan afin que les gens ne s' y trompent pas. Et maintenant, jetons un coup d'œil à nouveau. J'appuie sur Play. Et maintenant, vous pouvez voir que cela fonctionne parfaitement. Il s'agit donc d'une petite astuce que vous devez utiliser pour que les transitions d'arrière-plan fonctionnent avec Smart Animate. Résumons donc. Vous pouvez animer, colorier, dimensionner, positionner et faire pivoter de manière intelligente. Et vous pouvez combiner Smart Animate avec des animations animées. Vous ne pouvez pas animer intelligemment sous une autre forme. Donc, par exemple, un rectangle en étoile. Vous ne pouvez pas effectuer d'animation intelligente lors de l'ouverture d'une nouvelle superposition. Assurez-vous d'avoir la même dénomination et la même hiérarchie pour Smart Animate entre en jeu. Sachez que l'arrière-plan est rempli de transitions mouvantes et Smart Animate ne s' anime pas automatiquement. 27. SMART ANIMATE : 04 Construisons une application animée intelligente: Mettons en pratique ce que nous avons appris et créons cette application de filtrage de photos avec Smart Animate. Mais repartons de zéro. Nous avons donc ici les écrans avec lesquels nous allons commencer. Nous avons un écran d'accueil avec un filtre et des images ainsi qu'un menu et un écran détaillé. Donc, ce que je veux d'abord configurer, c'est un écran de démarrage. Je vais donc copier l'écran d' accueil ici. Et en fait, je vais me débarrasser de tout sauf de mon menu. Maintenant que je sélectionne mon menu, j'ai appuyé sur le bouton K pour le redimensionner. Vous pouvez également ouvrir le patinage à partir du menu ci-dessus. Et maintenant, je vais agrandir ce bouton de menu et le placer au milieu. Je vais sélectionner les touches de menu et les mettre à zéro. Donc, on dirait qu'ils vont aimer se fondre dans l'animation. Maintenant, l'autre chose que je veux faire est de le copier à nouveau. Et ici, sur mon tout premier écran, je vais modifier cela. Et maintenant, je vais le transformer en animation. Je vais donc passer au prototypage et prendre ce premier écran, connecté, puis dire « après délai », car il s'agit d'un écran de démarrage. Je veux donc que nous démarrions automatiquement. Et je vais le régler sur Smart Animate. Et je vais m'en tenir à cette transition de 1,5 s que j'ai déjà faite avec une autre animation. Et je vais faire de même ici. Alors maintenant, voyons à quoi cela ressemblera. Appuyons sur Play. Et vous pouvez voir l'écran de démarrage tourner. Et en fait, nous devons y retourner. Voyons pourquoi cela ne saute pas aux yeux. Il est donc toujours configuré pour toucher. Réglons cela sur Afterdelay. Et puis jetons un coup d'œil à nouveau. Et maintenant, ça devrait fonctionner. Donc, je tourne, puis ça remonte et mon menu apparaît. Hein ? OK, ensuite, la prochaine chose que je veux configurer, ce sont mes filtres. Je vais donc, tout d' abord, prendre l'écran et définir mon comportement de défilement. Alors jetons-y un coup d'œil. Si je mets un défilement vertical. Voyons donc à quoi cela ressemblera. Cela déplacerait donc tout l'écran sauf mon menu que j'ai corrigé. Cependant, c'est ce que je veux vraiment, je veux juste que cette partie défile. Il existe donc différentes manières d' aborder cette question. Si vous aviez plus de contenu ici, il serait logique de corriger cette partie supérieure en tant qu'en-tête. Cependant, comme je n' ai que les images, je pourrais tout aussi bien supprimer le défilement de mon cadre principal et configurer le défilement sur cette partie ici. Maintenant, n'oubliez pas que le défilement fonctionne et vous pouvez voir que j'ai déjà une erreur ici. J'ai besoin que le cadre soit plus petit que le contenu. Je peux donc le redimensionner et faire un peu attention car j' ai en fait cette configuration en tant que mise en page automatique. Parfois, il se comporte bizarrement et vous devrez peut-être le faire passer manuellement d'une hauteur fixe à une hauteur fixe. Dans ce cas, cela fonctionne plutôt bien. Maintenant, si je reviens à mon aperçu, vous pouvez voir que cela a maintenant le comportement que je recherche. OK, super. Configurons le reste des filtres. Je vais donc copier encore deux pages. Faites de la place ici. Et puis jetons-y un coup d'œil. OK, donc ce que je veux faire maintenant c'est sur celui-ci que je veux activer la dernière version. Je le règle donc à 100 %. Et je vais déplacer ce petit bar ici. Et je vais régler ça sur 50. Et je vais faire de même pour le dernier, réglé sur 100 % pour le premier actif et 50 sur le mode inactif. Vous pouvez simplement appuyer sur le chiffre et, comme vous pouvez le voir ici, il le transformera en pourcentage. Et je vais également déplacer cette barre parce que j' utilise la même barre. Il se déplacera simplement une fois que j'aurai utilisé Smart Animate sur cette navigation. Je souhaite également modifier la façon dont les images sont mélangées Je dois donc les sélectionner ici et les déclipser pour pouvoir toutes les voir. Et maintenant, ce qui est génial, c'est qu'en tant que configuration avec mise en page automatique, je peux simplement sélectionner une image et la déplacer avec les touches haut et bas . Faisons donc de même pour le dernier écran et mélangeons-les au hasard. Déplaçons celui-ci ici. OK, super. Sachez maintenant que nous venons de décliquer sur tout ce contenu. Donc, si je passe maintenant en mode aperçu et que je fais défiler la page, vous obtiendrez ce comportement de défilement. Assurez-vous donc de tous les sélectionner à nouveau et de découper à nouveau le contenu. Maintenant, refaisons la même chose. Et vous pouvez voir maintenant que ce comportement fonctionne à nouveau. Bien, maintenant, ce que nous voulons faire, c'est établir ces connexions. Donc, si je clique sur la dernière version, voulais passer ici je voulais passer ici et utiliser Smart Animate. Et je vais également laisser cette animation assez lente afin que nous puissions la voir correctement. Maintenant, je vais faire de même pour Popular, et je dois le faire aussi avec ces légumes verts. Revenez donc pour tout afficher à partir de là, passez à populaire Dans mon dernier écran. Pareil. En fait, celui-ci passe au premier. Et puis celui-ci ira ici. OK, alors jetons-y un coup d'œil. Si ça marche. Ceci est entièrement configuré dans Smart Animate et vous pouvez voir que non seulement la navigation ici nos filtres fonctionnent bien, mais que nos images sont également remaniées. Nous pourrions aussi légèrement augmenter la vitesse, mais je vais m'en tenir à cela pour le moment afin que nous puissions mieux la voir. Donc, le dernier élément qui nous manque maintenant est notre page détaillée ici. Ce que je veux ici, c'est que je veux des images dans un aperçu, puis j'ai mon texte et je veux un petit bouton de fermeture. Vous pouvez le configurer de différentes manières, alors n'hésitez pas à jouer vous-même. Bien, commençons par nos images. Je prends donc ceci ici et je copie les images. Je supprime cet espace réservé et je les colle ici. Mais je veux qu'ils soient empilés horizontalement. S est donc une configuration avec mise en page automatique. Je change simplement de direction. Déclipsons le contenu pour mieux le voir. Et je peux attribuer ça à un faucon. Et maintenant, nous avons toutes les images d'affilée. Je ne veux pas tous les afficher, juste quelques-uns. Je vais donc les supprimer ici. Et maintenant, pour configurer ce défilement horizontal, je dois réduire la taille du cadre n. C'est ce dont je parlais. Parfois, ce sera un peu étrange. C'est parce que nous travaillons avec la mise en page automatique. Donc, ce que nous pouvons faire, c'est régler l'horizontale sur fixe, et maintenant nous pouvons l'ajuster. Dans ce cas, je dois également modifier l'alignement, et maintenant je peux le changer. En fait, je souhaite adapter légèrement l'espacement afin que nous puissions voir qu'il y a plus de contenu à parcourir. En fait, remettons ça ici. Et j'ajoute un petit rembourrage sur la gauche. Maintenant, je sélectionne ce cadre et je passe au prototype. Et remarquez à quel point cela me donne une erreur car, de toute évidence, il n' y a pas de contenu vertical à faire défiler. Donc, dès que je changerai cela en défilement horizontal, cela fonctionnera. Jetons donc un coup d'œil qui fait ce que nous voulions faire. Voici donc mon contenu et je peux le faire défiler horizontalement. OK, super. Maintenant, je veux ajouter mon bouton ici, et je veux que ce ne soit plus un menu, mais un bouton de fermeture. Je l'ai donc recopié. Ce que je vais faire, c'est sélectionner, je dois en sauter deux. Je suis toujours en mode prototype. Je dois aller au Design. Et maintenant, j'ajuste ces lignes d'un menu à un X, donc à un signe de fermeture. Donc, ce que nous voulons faire maintenant, c'est connecter cette image pour ouvrir la page détaillée. Passons donc au prototype, puis sélectionnons-le et passons ici. Mais ce que je ne veux pas, en fait, c' je ne veux pas que tout cela soit animé de manière intelligente. Je veux que cela soit inséré ou déplacé. Je vais choisir. Et je vais quand même garder Smart Animate sélectionné ici , car je veux que le menu soit Smart Animate. Maintenant, voyons si cela fonctionne. Et petit indice, ce ne sera pas le cas, mais je vais vous montrer pourquoi. Prions donc. Appuyons sur Play. Ensuite, j'appuie sur ce détail et c'est vraiment beau, mais c'est intelligent d'animer tout ce qui se trouve ici. Je ne veux pas ça. Pourquoi fait-il cela ? Vous pouvez donc voir ici que ce groupe s'appelle images, et ce groupe ici s' appelle images et a en fait un ordre très similaire. Je dois donc changer le nom ici pour que notre couleur lors d'un appel, soit le détail de cette image. Alors maintenant, jetons un coup d'œil à nouveau. Maintenant, appuyons à nouveau sur cette image. Et vous pouvez voir que maintenant il emménage, mais il fait quelque chose d' étrange, comme cette transparence un peu étrange qu'en fait, il ne se ferme pas. Alors corrigeons cela également. OK, donc tout d'abord, ajoutons une interaction et disons que dans l'onglet, revenons d'où vous venez car nous allons connecter d' autres images ici. Et puis l'autre chose que nous voulons faire, c'est je voulais vraiment que cela passe à la vitesse supérieure, mais il y avait une étrange transparence. Donc, ce que vous devez faire ici, c'est dessiner un arrière-plan séparé. Je dessine donc un fond blanc ici et je vais simplement ajouter du blanc et le déplacer. C'était en quelque sorte un aperçu supplémentaire de ma commande ici, de mon ordre d'empilage tout en fin de compte. Ce n'est donc vraiment là que pour régler cette petite transparence étrange avec mon animation. OK, alors jetons-y un coup d'œil. Si cela fonctionne, appuyons sur Play. Et maintenant, ça a l'air génial. Et si j'appuie sur le X, je vois à quel point cette animation fonctionne bien. Nous avons donc ici notre animation en mouvement. Et comme nous avons toujours configuré Smart Animate dans l'animation animée, notre menu qui porte le même nom dans la même hiérarchie fonctionne avec Smart Animate. Jetons donc un coup d'œil et configurons notre design final. Donc, la seule chose que je veux faire maintenant est de les déclipser à nouveau. Et cherchons en fait cette image. Je vais le déplacer un peu plus haut. Et maintenant, je souhaite également connecter cela à notre page détaillée. Voici donc toujours l' animation que nous avions définie auparavant. À partir d'ici. Je m' y associe également. Et puis je vais les découper à nouveau, un petit conseil supplémentaire. Parfois, nous pouvons avoir envie d'avoir des piles d'éléments , puis de les ouvrir. Vous pouvez donc également le faire si cela est configuré avec la mise en page automatique. Maintenant, je peux aller ici et régler la valeur sur une valeur négative. Ensuite, mes images s'empilaient. Et vous allez maintenant voir comment ils sont empilés sur un seul écran. Et une fois que nous aurons choisi un autre écran, ils s'ouvriront. OK, donc je pense que notre application est terminée. Passons en revue l'ensemble de la configuration. Nous avons donc notre écran de démarrage. Ça se déplace ici, ça se transforme en animation. Ici, vous pouvez voir notre empilage. Et une fois que je passe à n'importe quel autre filtre, vous pouvez voir qu' il est empilable. Ensuite, nous pouvons cliquer sur notre image et nous obtenons notre page de détails, que nous pouvons ouvrir et fermer. Nous pouvons donc également accéder à cette page détaillée depuis n'importe quel autre point de notre application. Et comme il y a un revers, allons également revenir à la page d'où nous venons. Comme nous pouvons le constater, il ne nous a fallu que 10 minutes pour configurer l'ensemble de cette application Smart Animate. 28. SMART ANIMATE : 05 Animer avec un but et le code à l'esprit: Il est désormais facile de se laisser emporter par Smart Animate et Figma, car c'est tellement simple et incroyable, mais vous pouvez toujours animer avec un esprit codé à des fins spécifiques. Assurons-nous donc de nous souvenir de quelques points importants. Premièrement, nous l'avons conçu dans un but précis. Ainsi, chaque décision que nous prenons dans notre conception doit avoir un but et guider nos visiteurs. animations, en particulier les micro-interactions, telles que les états de survol de notre bouton, etc., jouent un rôle très important dans notre expérience utilisateur. Permettez-moi de vous donner un exemple. Le principe du destin commun. Cela signifie que deux ou plusieurs éléments se comportant la même manière sont perçus comme faisant partie d'une unité. Pense à un accordéon. Si je clique, je veux que cela s' ouvre et que je clique à nouveau pour qu'il se ferme. J'ai appris que cela fonctionne de cette façon et j'ai cliqué sur l'un d'entre eux. Je m'attends donc à ce que tout le reste fonctionne exactement de la même manière. Ce serait donc vraiment confus si je cliquais sur l'un d'eux et que tout à coup une superposition s'ouvrait. Il en va de même pour tous les éléments que nous utilisons. Ainsi, tous les boutons de votre page doivent avoir la apparence et se comporter exactement de la même manière. Trop. N'en faites pas trop. Je sais que Smart Animate est une magie clignotante, mais n'en abusez pas. Ne vous contentez pas d'en ajouter un peu ici et là car tout le monde dit : « Waouh, si vous l'utilisez trop, nous serons vraiment très encourageants et contribuerons à la surcharge cognitive de vos visiteurs. Assurez-vous que votre design fonctionne à tout moment dans un simple prototype cliquable. Et cela ne signifie pas que l'animation doit être une question secondaire. Pensez à un menu déroulant. Je peux cliquer puis passer à la section. Donc ça marche. Je peux maintenant ajouter une animation à défilement fluide guidant mes visiteurs vers cette section. Cela m'aide à comprendre où je suis et comment revenir. Cela améliore donc vraiment mon design. Ai-je besoin que des éléments entrent et sortent pendant l'animation ? Ils ne le sont probablement pas. Intelligent. Animate n'est pas un code. Et c'est vraiment très important pour plusieurs raisons. Par exemple, ce qui peut être très simple et un simple clic avec Figma Smart Animate peut s'avérer très difficile si vous utilisez quelque chose comme une animation CSS. Et inversement, peut y avoir d'excellentes possibilités que vous ne pouvez tout simplement pas montrer dans Figma. Cela ne signifie donc pas que vous ayez besoin de 20 réunions chaque outil de récolte ou case cliquable que vous créez avec Smart Animate pour chaque outil de récolte ou chaque case cliquable que vous créez avec Smart Animate. Avant commencer à contacter votre équipe de développement, demandez si une personne est responsable animation et que vous pouvez planifier ensemble dès le début. Demandez-leur également s'ils utilisent une bibliothèque d'animation spécifique et vous pourrez vous familiariser avec la documentation et faire une idée réaliste grâce à la vitrine de la bibliothèque. 29. COMPOSANTS : 01 Composants interactifs: Jusqu'à présent, nous avons utilisé l'animation entre différentes images. Et maintenant, je vais 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. Donc, comme son nom l'indique, pour que cela fonctionne, nous avons besoin de composants ou plutôt d'ensembles de composants contenant des variantes. Si vous n'êtes pas familier avec cela, une variante est essentiellement composée de deux composants, deux composants ou plus en fait. Et vous pouvez voir que j'utilise une convention de dénomination, bouton avant, barre oblique, bouton avant, barre oblique, survol. Ils sont donc de la même famille, mais d'un état différent, exactement de la même chose. Et puis ici, sur le côté droit, je peux dire combiner comme variance. Et l'avantage, c' est que si un bras extrait une instance ici, vous pouvez voir qu' à l'aide de ce bouton, les deux instances sont simplement enregistrées sous des états différents. À travers mon dessin. Je vais utiliser de nombreux exemples de ces éléments. Je peux donc non seulement enregistrer les différents états qu'ils ont dans cette instance, mais aussi les enregistrer dans Comportement. Je dois donc être sur les paramètres de mon prototype, puis, par exemple, pour enregistrer le comportement d'un bouton. Je souhaite donc ajouter un état de survol et connecter simplement mes deux boutons comme je le faisais auparavant avec n'importe quel autre cadre. Et maintenant, vous pouvez voir que dans mon menu, il est écrit OnClick ou je vais le changer en survolant. Et il a changé de set. Cette modification apportée ici ne sera active que dans les ensembles de composants. Maintenant, je peux utiliser Instant Dissolve ou Smart Animate. Je vais utiliser Smart Animate car il s'agit simplement d'une couleur. Voyons maintenant ce que cela fait, afin de pouvoir le voir dans notre mode de prévisualisation. J'ai besoin de 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 la souris sur mon bouton, vous pouvez voir que j'ai cette sécurité comportementale et 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, mais je veux qu'il soit déplacé ici et transformé en interrupteur. Dans ce cas, je ne veux pas que l'interrupteur soit entièrement activé, mais je voulais prendre cette petite bulle ici. Je veux donc prendre, sélectionner cette bulle, dessiner une animation et vous verrez qu'elle indiquera « onclick ». Dans ce cas, je veux cliquer sur Drag Change to, et je vais passer à Smart Animation ici. Dans ce cas, je dois te rendre la pareille. Donc, pour me vanter, ça va revenir à mon état d'origine. Maintenant, ce que je vais faire, c'est faire glisser une instance sur mon cadre. Et jetons un coup d'œil à ce qui fonctionne. Voici donc mon bouton. Je le fais glisser et vous pouvez voir qu'il change. La couleur était Smart Animate. Maintenant, je peux animer plus que deux. J'ai donc cette case à cocher et je vais faire sortir un connecteur. Et je vais dire qu'en un clic, passez à une animation intelligente. Et puis à partir de là, je vais vous dire d'aller ici. Et si je vérifie à nouveau, ça va revenir au début. Découvrons une instance de cette case à cocher. En fait, je vais en sortir quelques-uns. Et maintenant, jetons-y un coup d'œil. Si je joue à ce jeu, agrandis, je pourrai le vérifier. Si j'appuie à nouveau. C'est comme ça. Je peux donc l'utiliser dans mon design. 30. COMPOSANTS 02 Nesting des composants interactifs: Comme pour tout autre composant, vous pouvez imbriquer des composants animés et les combiner. Voici donc mon bouton et mon interrupteur. Si je passe au prototype, nous pouvons voir qu'ils ont déjà leur configuration d'animation. Et puis j'ai un autre composant, un composant de liste. Et ce que je peux faire maintenant, c'est de faire glisser le curseur sur n'importe quelle instance à partir de cet interrupteur à bascule. Et je suis en train de créer une instance de mon élément de liste ici. Vous pouvez donc voir que ce commutateur est imbriqué. Donc, si je clique sur Composant d'origine, il revient en arrière et me montre le composant animé imbriqué ou ses variantes dans ce cas. Et je peux maintenant en sortir quelques-uns. Et combinons cela dans un cadre. Vous pouvez en fait cliquer avec le bouton droit la souris , puis encadrer la sélection. Ajoutons donc du contenu et ajoutons également une instance de notre bouton ici, Sita, fond d'écran. Ajoutons-le ici. Et puis, bien sûr, on peut le remplacer. Ajoutons quelques images avec le plugin Unsplash. Je vais juste faire quelques portraits ici. Et maintenant, jetons-y un coup d'œil et jouons à ça. Vous pouvez maintenant voir que je peux régler individuellement ces boutons à bascule. Et mon bouton fonctionne également. 31. COMPOSANTS : 03 Animations faciles et zoomer: Les composants interactifs sont donc également d'une aide précieuse lorsqu'il s'agit de créer des états de survol. Alors qu'auparavant nous devions créer de nombreuses images, nous pouvons désormais simplement ajouter l'animation à notre composant, car tout remplacement hériterait de ce comportement. Voici donc ma carte, mon par défaut et mon état de survol. Maintenant, dans mon menu de prototypage, je vais simplement ajouter un survol large, passer à et animer intelligemment. Et je vais maintenant faire apparaître des instances de cette carte. Je peux maintenant remplacer les images et le texte. Pour les images. J'utilise le plugin Unsplash, mais vous pouvez en utiliser n'importe lequel. Jetons un coup d'œil à ça. Vous pouvez donc voir que lorsque je passe la souris, ils ont tous hérité de la date par défaut et de la date de récolte. Mais je peux encore ajouter un peu plus de magie ici, car n'oubliez pas que je peux aussi modifier la taille des animations. Donc, tout ce que je fais, c'est que par défaut, je laisse l'image à sa taille d'origine. Et puis, en mode survol, je vais juste agrandir légèrement l'image et changer votre position. Et maintenant, voyons ce qui se passe. Pendant que je survole. J'ai un très beau petit zoom sur les images. L'utilisation d'un composant interactif en matière d'aides à la récolte vous fera gagner beaucoup de temps à l'avance pour créer un simple carrousel de survol comme celui-ci. Vous aviez besoin d'un tel nombre d'écrans. Parce que chaque État, donc chaque fois que cela s'agrandirait, nous devrions sinon créer une propre page, puis créer des liens d'avant en arrière. Maintenant, tout ce dont nous avons besoin, c'est de cela, car nous avons ici un composant interactif qui propose une animation du tube à changement en vol stationnaire. Et puis ici, nous avons simplement des instances qui agrandissent le nœud. Si vous souhaitez utiliser des images agrandies à l'aide de Smart Animate avec des composants interactifs. Et puis l'un à côté de l'autre, vous devez ajouter une mise en page automatique. Donc, ici, vous pouvez voir que je n'ai pas de mise en page automatique à ce sujet. Cela signifie que lorsque cette image s'agrandit, toutes les autres images seront écartées. Une autre bonne chose est que, disons, je veux ajouter quelque chose à toutes ces instances. Ensuite, je peux simplement l'ajouter à ma variante ici, et elle sera ensuite représentée sur chacune d'entre elles. Alors rejouons à ça. Et vous pouvez voir que j'ai l'avantage, la seule chose que je n'aime pas, c'est de disparaître d' une manière étrange au lieu de simplement se dissoudre. N'oubliez donc pas que nous sommes intelligents. Figma recherche les mêmes éléments en termes de hiérarchie et de dénomination, du début à la fin. C'est donc exactement la même chose entre les cadres ou au sein des ensembles de composants. Copions uniquement cette couche appelée croix. Et ajoutons-le également à notre destination, même si nous ne voulons pas le montrer ici. Ajustons la taille en fonction de l'ajustement. Et je vais le mettre à zéro uniquement pour le franchir. OK, rejouons à ça. Et maintenant, vous pouvez voir que la croix disparaît joliment parce que l'animation intelligente fonctionne dans le jeu de composants. 32. COMPOSANTS : 04 interactions vidéo: Nous pouvons également utiliser des composants interactifs pour créer des lecteurs vidéo. Donc, dans mon exemple , vous pouvez voir que j'ai simplement intégré une vidéo. Donc, dans mon mode présentation, vous pouvez voir qu'il joue, mais qu'il jouera toujours. Je veux le changer pour qu'il soit immobile et uniquement lorsque je passe la souris dessus, après un immobile et uniquement lorsque je passe la souris dessus délai ou quel que soit déclencheur de mon choix, il commence à jouer. Donc, ce que je vais faire ici, c'est en créer un deuxième. Je vais détacher l' instance, l'appeler Hover. Et je vais le retransformer en composant. Et je suis en train de combiner ces deux éléments dans un ensemble de composants avec des variantes. Et je vais juste ajouter un peu de transparence. Et ce que je veux maintenant, c'est suivant : lire la vidéo de la même manière parce que j'ai une vidéo par défaut et une vidéo et que je survole. Donc, ce que je vais faire maintenant, c'est sélectionner la vidéo et je vais utiliser la commande Shift pour voir ces copies au format PNG. Maintenant, je vais simplement remplacer la vidéo par ce PNG. Il ne me reste plus qu' à ajouter du prototypage. Je suis donc en train de connecter cela, la valeur par défaut à l'acier, à ma vidéo et je dis que tout en survolant, passez à et animez intelligemment. Je vais maintenant sélectionner mon cadre. Et jetons-y un coup d'œil. Ici. J'ai mon acier et lorsque je le survole, vous pouvez voir que la vidéo commence à jouer. Remarquez que cela revient toujours là où je l'ai laissé. Donc, si je sors, ça va revenir là où je l'ai laissé. Si vous ne le souhaitez pas et que vous voulez toujours commencer par le début. Ensuite, pendant que vous définissez votre interaction ici, vous pouvez réinitialiser la position de la vidéo et elle recommencera toujours à zéro. C'est donc un très bon moyen de vous épargner quelques écrans et de tout intégrer à votre vidéo. Parce que vous pouvez le régler pour qu'il passe le curseur. Vous pouvez régler ce paramètre après un délai ou lorsqu'une certaine touche de votre clavier est enfoncée. C'est donc vraiment, vraiment génial pour travailler avec des vidéos. N'oubliez pas que les vidéos ne sont actuellement disponibles que sur les forfaits payants. 33. COMPOSANTS : 05 composants interactifs et mise en page automatique: Les composants interactifs deviennent particulièrement puissants s' ils sont combinés à la mise en page automatique. Voici donc un composant dit avec deux cadres, un rouge et un bleu de tailles différentes. Je vais juste récupérer quelques instances ici, et je vais les placer sur mon cadre ici. Et maintenant, je vais ajouter quelques prototypes. Donc, si je clique sur la rouge, je dis de passer à la forme bleue et de l'animer intelligemment. Et je vais la faire passer de la forme bleue à la forme rouge. Passez donc à OnClick en rouge et en animation intelligente. Maintenant, voyons à quoi cela ressemble. Et jusqu'à présent, aucune mise en page automatique n'a été appliquée nulle part. Vous pouvez donc voir que si je clique, cela change. Et vous pouvez voir qu' ici s'agrandit. Mais ils se rencontrent en quelque sorte. Et si je clique à nouveau, ils reprennent leur forme d'origine. Et le Smart Animate fonctionne dans cette animation par clic. Cependant, voyons ce qui se passe si je les sélectionne tous. Et maintenant InDesign, je suis en train de le transformer en cadre de mise en page automatique. Déplaçons ce cadre un peu vers le haut et donnons-lui un peu plus d'espace et vous verrez pourquoi dans une minute. Et maintenant, appuyons sur Play. Vous pouvez maintenant voir mon cadre ici. Et lorsque je clique, vous pouvez voir qu'il se déplace de haut en bas. Et la raison en est que, n'oubliez pas que mise en page automatique occupe toujours tout l'espace disponible. C'est ainsi que je peux animer intelligemment et adapter les autres contenus à la nouvelle taille. Je peux vraiment pousser ça à l'extrême. Supposons donc que j'évalue cette forme bleue ici à zéro. Et remarquez que Figma ne me donne jamais zéro, elle me donne toujours celui-ci. Donc, une petite astuce consiste à passer 0,00 pour quelque chose comme ça, puis ça va passer à zéro. Il est donc toujours là, mon élément, mais il est caché. Alors maintenant, rejouons. Et maintenant, vous pouvez voir que si je clique sur ce bouton rouge, ils disparaissent. La seule chose est que vous vous demandez probablement si vous pouvez ajouter un petit bouton plus ou en ajouter à nouveau, puis les ajouter. Eh bien, cela ne marchera pas vraiment parce qu' théorie, ils sont tous ici à Figma. Je ne me rappelle pas lequel. Il vous suffit de cliquer sur lequel vous ne l'avez pas fait. Vous pouvez cependant simuler. Vous pourriez donc ajouter, disons, simplement un petit bouton rond ici et dire que c' est le bouton plus. Donc, ce que nous pourrions faire, c'est dire qu' une fois qu'ils seront supprimés et que j'aurai cliqué sur celui-ci, je vais simplement copier la même aversion que celle qui existe déjà ici. Ensuite, je vais connecter cette navigation en un clic et une animation intelligente. Regardons donc cela à nouveau. Alors maintenant je suis en train de supprimer. Ensuite, je peux revenir à l'état d'origine, mais je ne peux pas sélectionner des éléments individuels pour qu'ils réapparaissent. Vous pouvez donc vraiment créer des actions impressionnantes et réalistes avec cela. Donc, ici, par exemple , en glissant, un petit bouton Supprimer apparaît et je peux ensuite supprimer l'un de ces éléments ici. Comment est-ce que j'ai fait ça ? Eh bien, c'est exactement le même principe. Voici donc nos éléments qui sont utilisés ici et je les remplis simplement avec mon contenu. Et puis, dans mes composants définis ici, vous pouvez voir que j'ai mon élément par défaut ici, et il contient déjà le bouton Supprimer. Donc, si je désactive ce contenu ici, vous pouvez voir qu'il y en a déjà ici et c'est vraiment important. Car n'oubliez pas que Smart Animate a besoin d'un début et d'une fin pour fonctionner. Donc, lors de ma suppression, tout ce que j'ai fait, déplacer cette étiquette ici vers la gauche. Ce sera donc mon animation de glissement. Et je les ai simplement connectés à l' aide d'une animation par glisser-déposer. Ainsi, faites glisser, modifiez et animez intelligemment. Ensuite, une fois que vous avez cliqué dessus, notez que cela n'est lié qu' à cette icône de suppression, et notez que cela n'est lié qu' à cette icône de suppression, non au reste de mon élément. Donc, si c'est lié, alors ça ira ici. Et celui-ci est réglé, en l'occurrence 21. Je pourrais également le mettre à zéro. Et c'est pourquoi il semble que cela soit supprimé, car ici mes instances sont simplement configurées avec la mise en page automatique. Par conséquent, si l'un d'entre eux est mis à zéro , ils passeront tous à la hausse. Je vous encourage vivement à jouer avec les composants interactifs et mise en page automatique, car vous pouvez vraiment créer des prototypes très impressionnants avec cette technique. 34. COMPOSANTS : 06 composants d'entonnoir: Je veux vous montrer une petite astuce que j'appelle des composants en entonnoir. Ce qu'ils font essentiellement, c'est connecter des composants lors du prototypage sur différentes pages et fichiers. Voici mon design qui se compose d' une page d'accueil À propos de la page d'atelier et d'une section newsletter. Et comme vous pouvez le voir ici, je peux accéder à chacun d'entre eux à partir de mon en-tête. Maintenant, si nous cliquons sur l'en-tête, nous pouvons voir à partir de la couleur violette et la forme vide en forme de losange qu'il s'agit d'une instance. Si nous examinons où se trouve notre composant principal, nous passons à une page de composants séparée. Ou cela peut même se trouver dans un fichier complètement différent. Parce que c'est généralement une bonne pratique de ne pas stocker vos composants avec votre conception. Donc, pour notre prototypage, cela signifie maintenant que je dois parcourir chaque page , puis établir les connexions correspondantes. Il me faudrait donc, tout d'abord, parcourir ma page ici, ma page de blog. Ensuite, je dois accéder à ma page À propos de nous et créer un lien de retour. Je devrais faire tout cela pour chacune des pages. Maintenant, une fois que je l'ai fait, ce qui représente beaucoup de travail si je veux apporter des modifications, disons que, comme dans la newsletter que j'ai remarquée, une nouvelle page s'ouvre, mais il s' agit en fait d'une superposition. Ensuite, je devrais parcourir chaque page et modifier cela. Supprimons toutes ces connexions et trouvons une autre solution. Au fait, petite astuce, cliquez avec le bouton droit sur votre toile en mode prototypage et vous pourrez supprimer toutes les interactions. Cela revient également à supprimer ce flux ici, et jetons-y un coup d'œil. La première chose à faire est donc de passer à la section des composants principaux. Donc, ce que je veux vraiment, c'est avoir ce maître ici, en gros. Et puis chaque fois que je clique sur atelier, disons que j'ajoute une interaction. Si je clique, je veux accéder à l'atelier. Mais comme vous pouvez le constater, je n'ai actuellement accès à aucune autre page dans Figma. Et comme je l'ai dit ici, nous avons simplement stocké le composant et une autre page, mais ce composant se trouve peut-être dans un fichier complètement différent. Nous pouvons donc utiliser une petite astuce qui vous permet de simplement copier le composant ou d'utiliser l' de ces instances que vous avez déjà ici. Je vais juste partir de zéro et créer cette instance. Maintenant, je pourrais connecter cette instance, mais le fait est que cette instance ne donnerait rien aux autres instances. Il doit s'agir d'un composant principal. Nous allons donc faire une petite astuce ici : sélectionnons, puis empaquetons cette instance dans un autre composant. Nous sommes donc en train de créer un nouveau composant et je vais appeler cet entonnoir. Donc, si nous examinons notre composant final, vous pouvez voir qu' il contient simplement une instance de notre navigation principale. Donc, si nous revenons ici, je retrouverai tout ce qui est stocké. Bon, pour en revenir à notre conception, ce que nous devons faire maintenant, c'est remplacer toutes nos instances existantes par ce dernier composant. Donc je vais juste y aller et ensuite les composants. Et puis je vais maintenant regarder une page de composants et je passe à la page de conception, et je choisis la navigation par entonnoir. Vous pouvez également simplement les supprimer, faire une copie, puis en faire une instance et les remplacer. Alors maintenant, si je sélectionne l'une de ces instances et que je reviens au composant principal, alors elle remonte à mon entonnoir. Il ne me reste plus qu'à connecter l'entonnoir mon prototypage à mes écrans une fois. Donc, celui-ci passe à la solution, au blog. Celui-ci est destiné à l'atelier. Ensuite, celui-ci passe à propos de mon bouton d'abonnement. Je souhaite ouvrir une superposition. Cliquez donc sur Ouvrir la newsletter superposée. Maintenant, nous pouvons voir si je clique ici, alors ils ont hérité de toutes ces connexions. Ainsi, toutes ces pages sont automatiquement connectées. Et si je change quelque chose ici, ils en hériteront. Jetons un coup d'œil à cela et cela fonctionne très bien. Je peux cliquer dessus et accéder à ma newsletter de n'importe où . Je n'utilise donc vraiment que ces composants finaux pour configurer mon prototypage. Ils n'ont rien à voir avec les composants principaux. Ainsi, toute modification de la conception du composant principal serait simplement prise en compte par mon composant final. Tant que la dénomination et la hiérarchie ne sont pas modifiées, même les connexions resteront en place. 35. VARIABLES : 01 Prototypage avec des variables: Prototypage avec variables. Commençons par les bases. Ici, j'ai trois boutons et j'ai un carré. Maintenant, je veux remplir ces boutons avec des tailles différentes. Et lorsque je clique dessus, je veux que le carré change en fonction de la taille que j'ai choisie. J'ai parlé de Collection, que j'ai appelée Prototyping example one Et vous pouvez voir que j'ai dit la taille carrée 400, la taille 100, la taille 300, la taille 3600 Donc, ce que je veux faire maintenant, c'est lier tout d'abord ces nombres aux variables. Je vais donc simplement sélectionner un numéro. Et puis, dans nos champs de propriétés de texte, je peux maintenant le trouver en fonction du nombre que vous avez, vous devrez peut-être faire défiler un peu. C'est donc ma taille 1. Ensuite, j'ai ma taille 2. Et ce dernier bouton sera ma taille 3. Maintenant, je veux relier mon carré à la taille du carré, alors je le sélectionne. Ensuite, dans le panneau Propriétés, vous pouvez voir qu'il est déjà réglé sur 400, 400 . Quelle est ma valeur par défaut ? Mais je veux lier cela aux variables que je peux récupérer et modifier cette taille plus tard. Je vais choisir la largeur et je vais également lier la hauteur à cette variable. OK, super. Maintenant, nous avons notre configuration de base et nous pouvons passer au prototypage Alors maintenant je vais connecter ce bouton. Et ce que je veux faire, c'est lui indiquer si je clique, puis modifier cette largeur pour que la taille du carré corresponde à la nouvelle valeur. Donc, dans ma liste déroulante, je vais choisir la variable définie, puis je vais choisir la taille du carré. Il vous suffit donc de taper le nom de cette variable et vous le verrez ici. Il va déjà vous demander sur quoi vous voulez le configurer ? Et maintenant, je peux effectuer une recherche dans ma liste déroulante et je veux le régler à la taille 1 Donc, avant d'aller plus loin, voyons si cela fonctionne réellement. Je vais choisir ce cadre, et je vais maintenant ouvrir l'aperçu du fichier. Vous pouvez utiliser un raccourci, Shift et la barre d'espace, ou simplement utiliser la liste déroulante ici Je vais cliquer sur mes 100 et vous pouvez voir que cela fonctionne, mes carrés étant redimensionnés. Maintenant, je veux configurer ces tailles et je veux également configurer un bouton de retour pour revenir à la taille par défaut d'origine. Je vais choisir mon deuxième bouton. Et d'ailleurs, vous pouvez également copier et coller des interactions. Je vais juste revenir en revue petit à petit afin que nous nous habituions un peu au processus. Donc, la taille du carré, et nous voulons la définir dans notre variable pour le moment. Et maintenant, nous passons à la dernière. Nous voulons donc à nouveau sélectionner une variable définie. Nous optons pour la taille carrée et nous allons la régler à la taille 3. Maintenant, je veux juste configurer mon bouton de réinitialisation pour revenir à 400,400. Maintenant, ce que vous pourriez être tenté de faire c'est d' ajouter une connexion. Et d'ailleurs, je ne fais que me connecter à la place. Pour revenir à la variable définie, vous pouvez également utiliser un menu Interaction situé ici pour l'ajouter. Dès que vous utiliserez une variable, vous verrez apparaître ce petit panneau indiquant qu'il n'est plus vraiment connecté au carré. Ce que vous pourriez être tenté de faire, c'est de dire que la taille carrée est égale à la taille carrée. Parce que ça devrait être 400, non ? Ça ne l'est pas Parce que que se passe-t-il maintenant ? Si nous ouvrons notre aperçu, vous pouvez voir qu'il change toutes les tailles. Mais si je clique ici, ça ne change pas. Et cela est dû au fait que nous introduisons les nouvelles tailles dans cette variable de taille carrée. Vous ne pouvez plus le voir à l'intérieur de votre collection, mais c'est ce qui se passe en arrière-plan. Nous pouvons résoudre ce problème en ajoutant simplement une autre variable , que je vais appeler default. Je vais le régler sur mon 400 d'origine. Je suis donc en train de changer la taille du carré et je vais la définir comme par défaut. Alors maintenant, nous allons réessayer. Nous pouvons passer en revue les différentes tailles. Et si j'appuie sur Réinitialiser, il reviendra à ma taille par défaut d'origine. Si je devais modifier l'une des tailles ici. Ainsi, par exemple, définissons celui-ci ici à vraiment petit, juste cinq. Ensuite, vous pouvez voir que cela se met à jour automatiquement non seulement dans mon bouton, mais également dans mon Interaction. 36. 02 échange de variantes avec des variables: Échange de variantes avec variables. aide de variables, nous pouvons extraire des variantes spécifiques d'un composant et nous pouvons également utiliser des décès pour le prototypage Ici, j'ai un ensemble de composants avec trois variantes, a, B et C. Et ici, j'ai une instance de la variante a. Et j'ai trois petites bulles. Donc si je clique sur orange, je veux que a s'affiche. Ensuite, celui du milieu ici, rouge est B et le bleu serait C. J'ai donc créé une collection. Et vous pouvez voir que dans cette collection j'ai une variable de chaîne appelée sélection. Et puis j'ai l' orange, le rouge et le bleu. Et c'est en fait le nom de la variation. C'est donc le seul endroit où vous devez vraiment faire attention à la dénomination, car il doit s'agir de la dénomination exacte que vous avez donnée à votre variance. J'ai dit F sub avec trois modes différents et je le laisse simplement dans le mode d'ajout 12.3 Veuillez noter que vous aurez probablement besoin d' un problème avec Figma ou supérieur pour configurer la note Avant de configurer une interaction, je dois lier cette variable ici, la sélection à mon instance. Cela doit se trouver sur l' instance et ne fonctionnera pas dans votre ensemble de composants pour le moment. Sélectionnez donc l'instance, puis sur le côté droit, dans un panneau des propriétés, si vous passez la souris sur le nom de l'instance, vous obtiendrez ce petit symbole, Assigner Maintenant, cette fonctionnalité est vraiment nouvelle. Cela bouge peut-être encore un peu, mais ça devrait être quelque part par ici. Utilisez-le donc dans la liste déroulante et choisissez maintenant la variable de sélection que nous venons de configurer. Alors que j'ai connecté cela à la variable de sélection, il sait maintenant qu'il y a une variance orange, rouge et bleue à l'intérieur . Passons au prototypage et connectons ceci. Je sélectionne donc la bulle orange et j'utilise le connecteur. Vous pouvez également simplement cliquer sur un plus ici sur Interaction pour le configurer. Et je passe à la variable set. Et maintenant je dis de définir la sélection sur, je vais devoir utiliser le nom de la variante. Donc, dans ce cas , l'orange indiquée. Et je connecte maintenant le rouge de la même manière. Je vais donc définir la sélection des variables, et je vais simplement régler celle-ci sur rouge, le bleu. Je vais faire la même sélection de variables de réglage, et je vais mettre celle-ci en bleu. Jetons un coup d'œil. Si cela fonctionne, nous pouvons passer en mode présentation ou en aperçu d'automne. Je vais l'utiliser avec un raccourci Shift Spacebar. Maintenant, si je clique sur mes petits boutons ici, vous pouvez voir qu'il affiche la bonne variante. C'est donc très pratique pour configurer des choses comme l'affichage de différents styles d'un même produit. Et remarquez que j'utilise exactement la même collection pour cet exemple. Et je lie à nouveau cette variante à ma sélection de variables. Et la seule chose que je dois faire attention, c'est que mes variantes portent le même nom. Celui-ci est donc toujours orange, rouge et bleu. Donc, si j'essaie cela, vous pouvez voir que cela fonctionne aussi bien que dans notre exemple précédent. 37. VARIABLES : 03 expressions: Prototypage avec des expressions. Dans le prototypage Figma, nous pouvons désormais combiner le calcul avec des variables, donc plus, moins, diviser et multiplier Cela peut être quelque chose de très simple, comme une variable plus ou moins une autre valeur ou une autre variable. Mais vous pouvez également les enchaîner pour des configurations plus avancées Ici, j'ai une configuration composée d'un bouton moins NA plus et simplement d'un nombre qui est actuellement réglé sur zéro. Maintenant, vous avez déjà créé une collection. Et vous pouvez voir que c'est super simple. Tout ce que j'ai, c'est une variable numérique et la valeur est fixée à zéro. Réglons maintenant ce zéro ici sur notre compteur de zéro. Je sélectionne le zéro, puis dans le panneau Propriétés du texte, je vais sélectionner Appliquer la variable. Et je vais choisir ici, mon comptoir. Donc, si j'appuie sur ce bouton Plus ici, je veux qu'un soit ajouté à ma valeur totale. Et si j'ai moins, je veux qu'un soit retiré de mon compte total. Passons donc au prototypage. Je vais d'abord sélectionner le bouton Plus. Je vais ajouter une interaction et je vais dire « onclick », définissez la variable avec le compteur de noms Et maintenant je dois réutiliser ce compteur de variables. Et maintenant je peux en ajouter un. Voyons si cela fonctionne. Je vais sélectionner le cadre et ouvrir mon aperçu. Et si je clique sur Plus, vous pouvez voir que j'en ajoute un. Alors maintenant, je veux faire la même largeur moins l'inverse. Je sélectionne donc mon bouton moins , puis j'ajoute une interaction. Et je vais définir une variable pour le compteur. Et puis le compteur vaut moins un. Super, d'accord, allons y jeter un coup d'œil. Ouvrez Preview plus et moins. Je peux l'utiliser sur à peu près n'importe quoi. Il n'est pas nécessaire que ce soit un chiffre. Donc, ce que je pourrais faire, c'est dessiner une forme ici. Et remplissons-le simplement. Et maintenant je peux lier n'importe quelle hauteur ou largeur de cette forme au comptoir. Notez que c'est zéro, mais il va passer à un car Figma n'exempte pas zéro comme valeur ici Et je vais juste faire des pas un peu plus grands pour que nous puissions mieux le voir. Définissons-les donc en deux étapes de dix. Maintenant que nous ouvrons l'aperçu, vous pouvez voir que les chiffres, ainsi que ma forme changent en fonction des boutons sur lesquels j'appuie. 38. 04 Expressions enchaînées: Dans le prototypage Figma, nous pouvons également enchaîner des expressions. Dans mon exemple, j'ai un sweat-shirt, au prix de 60, et j'ai un bouton moins N, un bouton plus Je peux donc ajouter ceci. Il s'agirait de la quantité totale de sweat-shirts ajoutés. Ensuite, je veux voir quel en serait le coût total. Donc 60 fois le nombre que j'ai ici. J'ai déjà configuré mes avantages et mes inconvénients. La collection que j'utilise est un compteur et une valeur de zéro. Ensuite, vous pouvez voir dans Prototypage que nous avons réglé celui-ci ici sur compteur, puis compteur plus un, le calcul que nous avons. Et puis celui-ci est réglé pour que le total des comptes soit un nombre. Jetons donc un coup d'œil à cela dans notre aperçu intégré au fichier. Nous pouvons donc voir si nous avions plus, puis cela augmente. Et si nous avions moins, alors ce chiffre redescend. Nous devons maintenant en ajouter un peu plus. Tout d'abord, nous devons ajouter le prix à notre collection, et nous avons également besoin d'une variable pour conserver le total. Ouvrons donc notre collection. Nous allons donc ajouter le prix sous forme de nombre. Et c'est actuellement 60. Ensuite, je vais créer une autre variable, qui est également une variable numérique, et ce sera le total, et il est actuellement réglé à zéro. Reliez maintenant nos chiffres. Je vais donc prendre ce 60 ici et je vais me connecter à mon prix. Et celui-ci sera mon total. Passons au prototypage. Maintenant, ces boutons sont là, je peux encore les déclencher. Alors ouvrons-les. Et j'ai actuellement réglé le bouton plus sur le compteur plus un, donc j'augmente ce nombre. Maintenant, ce que je veux faire ici, c'est ajouter une autre action. Je souhaite définir une autre variable. Parce que ce que je veux faire, c'est fixer le total au total actuel majoré du prix. Jetons donc un coup d'œil à cela. Dans l'aperçu. Nous pouvons maintenant voir que si j'en ai un, c'est 60. Et maintenant, je dois toujours faire le total plus un. Génial. Configurons donc également à moins. Cela fonctionne donc à peu près de la même manière. Je vais ajouter une autre action, définir la variable, et je vais définir le total, deux, au total. Et dans ce cas, moins le prix actuel. Si nous y jetons un coup d'œil dans notre aperçu, vous pouvez voir que maintenant cela augmente et qu'il va encore baisser. Si vous vous demandez pourquoi nous utilisons des variables au lieu de simplement ajouter plus 60, alors l'avantage est que si nous configurons tout en variables, nous pourrions simplement modifier le prix ici. Supposons que nous modifiions ce prix en at, et que maintenant tout serait mis à jour. Ainsi, peu importe où vous l'utilisez dans votre fichier, tout utilisera toujours les bonnes valeurs. 39. VARIABLES : 05: Déclarations conditionnelles avec variables. Nous voici donc à nouveau notre comptoir. Nous avons donc des plus et des moins. Et jetons un coup d'œil à la configuration rapidement. Le plus est donc réglé pour contrer les augmentations chaque fois que j'appuie sur 100. Et pareil pour le moins, juste qu'il diminue de 100. Maintenant, j'ai mon zéro. Et cela est dit à la variable du compteur. En bas, j'ai une barre, et ici j'ai une forme. Reprenons simplement cette forme. Et vous pouvez voir que c'est x2 zéro. C'est donc en fait la variable que j'ai appliquée ici. J'ai donc mis le compteur à zéro. Si nous examinons une collection, j'utilise une collection précédente ici, mais je n'utilise en réalité que cette variable de compteur. Maintenant, ce que je veux, c'est que si cela atteint 500, qui signifie que ma barre est pleine, alors je veux passer à l'écran qui indique u1 survoler . Je veux que ce numéro qui gagne soit réglé sur le numéro qui le déclenche. Maintenant, je pourrais le faire à la main parce que je sais que je veux que ce soit 500, mais c'est beaucoup plus facile. Si je le configure en tant que variable, je vais en ajouter une autre , que je vais appeler threshold. Donc, à ce seuil actuel, je sais que je veux que ce soit cinq cents C'est à ce moment-là que je vais déclencher mon nouvel événement. Et je vais en fait lier celui-ci ici, deux à 500, juste pour que tout soit bien rangé Mettons les choses au clair un moment. Nous y voilà. Voyons à quoi cela ressemblerait actuellement. Je vais donc ouvrir l'aperçu avec Shift et Spacebar. Et je peux voir que si j'ajoute plus et si j'ajoute moins, cela se fait par étapes de 100. Et à 500 ans, c'est ce que je veux. Cette barre est pleine. Toutefois, il dépasserait désormais simplement ce chiffre. Et je voulais, une fois que je l'ai atteint, passer à mon nouvel écran. Passons au prototype et sélectionnons notre bouton plus. Ou nous avons actuellement que si nous cliquons dessus, il augmente de 100. Cliquons donc sur Plus et ajoutons une action, et nous voulons ajouter une action conditionnelle. Maintenant, je peux dire si le compteur et vous pouvez voir que j'obtiens certains préréglages sont égaux à mon seuil Ensuite, ce que je veux faire, c'est ajouter une action, vers laquelle je voulais accéder. Et maintenant je peux choisir ici la page que j'ai créée. Je pourrais également choisir la façon dont je veux que nous naviguions. Si malin, éteins ça. Je vais juste le laisser tout de suite pour le moment. Vous pourriez maintenant être tenté d' ajouter quelque chose comme ceci, définir la variable ici et d'utiliser ensuite cette partie. Utilisez donc le compteur puis le compteur plus 100. Ensuite, vous pouvez simplement supprimer cette partie ici. Toutefois, ne le faites pas. Cela fonctionnerait toujours, mais ce qui se passerait, c'est qu'il passerait à 500 et ce n' est qu'alors que vous cliquerez qu'il sautera par-dessus notre vent. Donc, ce que vous pouvez faire, c'est simplement laisser ce champ vide car l'ordre dans lequel les choses se passent est important. Nous nous dirigeons donc d'abord vers le compteur pour augmenter si nous cliquons. Ensuite, nous voulons que Figma vérifie si nous avons déjà atteint notre seuil ? Essayons ça. Sélectionnons cette zone ouverte dans Fire Preview et vous pouvez voir que nous sautons par étapes de 100. Backwards fonctionne toujours. Nous n'avons rien à faire ici. Et alors que nous atteignons les cinq cents, nous passons à notre nouveau moment Et remarquez à quel point cela augmente vraiment dès que nous atteignons ce chiffre Je tiens à souligner quelque chose que vous pourriez rencontrer lorsque vous travaillez avec des déclarations conditionnelles. J'ai donc ici un exemple et il est presque identique. Et j'utilise en fait exactement la même collection pour cela. Donc ce qui se passe ici, c'est que j'ai un comptoir. Passons au prototypage. Et nous utilisons celui-ci avant que vous ne puissiez voir le conseil augmenter d'un. Le total augmente en fonction du prix. Ce sera donc le total. Je voulais le dire. Si le prix total atteint le seuil, qui est toujours de 500, sautez et dites que la livraison est gratuite. Cependant, si nous y jetons un coup d'œil, vous pouvez voir que cela ne fonctionne pas réellement. Je dépasse mon seuil de 500 ans et rien ne change. Si vous travaillez avec des instructions conditionnelles, vous devez être très, très précis. Toute la configuration est donc correcte. Cependant, il indique que le seuil est égal. Donc, avant que cela ne fonctionne, nous n'atteindrons jamais exactement 500 en tant que multiple de 60. Débarrassons-nous donc de cela et disons que le total est supérieur à. Et maintenant, nous pouvons à nouveau utiliser notre seuil. Et maintenant revenons en arrière et voyons si cela fonctionne. Vous pouvez voir que nous augmentons, que nous atteignons les 500 et que nous passons au nouvel écran avec la livraison gratuite. Et maintenant, nous devrions également tenir compte de nos inconvénients. Donc, si je clique sur Whiners, j'ai également une déclaration conditionnelle ici maintenant et je reviens à mon écran précédent Oui, nous pourrions même nous en tirer avec une page si nous ajoutons des booléens 40. VARIABLES : instructions 06 et booléens: Prototypage avec des booléens et des variables. Donc, actuellement, nous avons une configuration comme celle-ci où nous avons, Laissez-nous l'exécuter. Nous avons un sweat-shirt au prix de 60€. Nous pouvons l'ajouter à notre panier. Cela augmentera le nombre et le prix total. Et puis, une fois que nous avons atteint ce seuil de 500 passant à cette nouvelle page, avec la livraison gratuite. Et si nous réduisons les montants , nous reculons. Cela fonctionne donc bien, mais nous pouvons en fait le réduire à une seule page si nous utilisons des booléens J'ai donc ici une page qui inclut déjà la livraison gratuite et, ce qui est important, c'est que tout est configuré en tant que mise en page automatique. Jetons un coup d'œil à ce qui se passe actuellement ici. Donc, si je clique sur Plus, j'ajoute un article et le prix total augmente en fonction du prix des sweat-shirts Maintenant, ouvrons notre collection. Nous pouvons voir que nous avons le comptoir, qui est celui-ci ici. Ensuite, nous avons le prix, qui est ici, notre total, que nous avons lié à celui-ci. Comme vous pouvez le constater, nous avons un seuil que nous avons fixé à 500. Je vais maintenant ajouter une autre variable, et je vais l'appeler celle-ci, qui sera une livraison gratuite booléenne par défaut. Je vais régler ce paramètre sur false. Maintenant, tout d'abord, je dois lier cette livraison gratuite à cette valeur booléenne Sélectionnons-le. Ensuite, dans le panneau Propriétés, sous la couche, cliquez sur l'œil, mais ne cliquez pas dessus. De cette façon, assurez-vous qu'il s'agit d'un clic droit et que vous obtiendrez ensuite les propriétés. Et maintenant, cliquez sur la livraison gratuite, qui est définie sur false. Et cette partie de la livraison gratuite va disparaître. Vous pouvez toujours le voir dans votre menu Layers. OK, maintenant établissons une certaine logique. Passons donc au prototypage et appuyons sur notre bouton plus ici Ce que je veux faire maintenant, c'est ajouter une déclaration conditionnelle. Et je tiens à dire si le total est supérieur au seuil, ce que je veux faire, c'est définir la variable de livraison gratuite à partir des plis sur true. Si j'y reviens si mal, je voudrais faire de même. Je souhaite donc ajouter des déclarations conditionnelles. Et je tiens à dire que si le total est inférieur au seuil défini, le total est inférieur au seuil défini, je veux remettre la variable de livraison gratuite sur false. Maintenant, fermons ça et jetons un coup d'œil. Si c'était le cas. Si j'appuie sur Plus, nous progressons, nous atteignons notre seuil et la livraison gratuite apparaît. Et je peux aller plus loin. Mais au fur et à mesure que je descends et que j'atteins à nouveau le seuil, il disparaît pour désactiver à nouveau la livraison gratuite 41. DOCUMENT : 01 prototypes de documents avec des flux: Ainsi, une fois que vous aurez terminé votre prototype, vous souhaiterez le partager avec d'autres personnes. Jetons un coup d'œil aux moyens de le faire. Voici donc un exemple de prototype, et vous pouvez voir que je travaille sur la même longueur d'onde sur mon design mobile et sur mon design de bureau. Et vous pouvez également voir que j' ai déjà configuré différents flux. Si je clique sur le fond gris pendant le prototypage, vous pouvez voir ci-dessous un aperçu de tous mes flux. Donc, ce que j'aime faire, c'est leur donner un peu de structure. J'utilise donc mop pour les flux mobiles et Deaths pour les flux de bureau. Ensuite, je peux avoir le même flux, donc me connecter, donc j'ai une connexion mobile et une connexion de bureau. Et puis deux seraient à parcourir et à ajouter. Et vous pouvez voir que vous n'avez actuellement cette configuration que pour mobile. Je peux également les mélanger ici, par exemple . Je peux simplement les déplacer et ensuite les trier dans l'ordre ou les renommer comme je le souhaite. Nous allons maintenant passer au mode présentation. Vous pouvez le voir ici sur le côté gauche Je les ai bien ordonnés. Je peux donc voir sur mobile et sur ordinateur côte Je peux simplement cliquer sur chacun d' entre eux et ils se connecteront évidemment à l'ensemble du prototype. Mais je peux toujours passer à des sections spécifiques que je souhaite mettre en évidence. Maintenant, c'est plutôt sympa, mais je peux ajouter une couche supplémentaire de vue d'ensemble pour tous ceux qui saisissent mes fichiers. Notez que lorsque nous survolons l'un de ces flux, nous obtenons un lien qui nous permet de cliquer sur Copier le lien. Donc, par exemple, pour la connexion mobile. Ensuite, ce que j'aime faire, c'est créer un petit aperçu. Ici, j'ai une page pour mon affichage mobile et une pour mon bureau. D'ailleurs, il se peut que vous n'en ayez qu'une si vous travaillez uniquement sur notre application mobile ou que vous possédez également plusieurs tablettes tactiles. Cela dépend vraiment de ce sur quoi vous travaillez. Ensuite, tout ce que je fais ici, c'est taper les différents flux que je souhaite, ou peut-être que certains d'entre eux ne sont pas encore opérationnels. Ensuite, il vous suffit de sélectionner votre texte, de le lier, puis de copier le lien que vous venez de copier du côté droit ici à partir des flux contenus dans ce petit aperçu. Ainsi, toute personne accédant à mon fichier peut cliquer directement sur ces liens afin de ne pas avoir à comprendre qu'elle doit accéder à l' aperçu ou quoi que ce soit d'autre. Il leur suffit de cliquer ici ouvrir l'aperçu. Et cela donnera un aperçu de mon prototype. Il démarrera toujours directement sur le flux auquel j'ai ajouté le lien. Les petites bulles à côté correspondent à quelque chose que j'aime utiliser. Vous pouvez donc le voir ici dans mon onglet de conception, cela ressemble à un fichier externe. Alors sautons là-bas. Ouvrons simplement ce fichier. Et ici, j' ai simplement configuré des variantes. Je peux donc voir dans quelle phase se trouve le test et dans quelle phase se trouve le prototype. Voici donc la première : le prototype est en cours de réalisation. Donc, par exemple, consultez le livre, je n'ai pas encore terminé ce flux et il doit donc être testé. Et ici, vous pouvez voir que la connexion au prototype a toujours été effectuée, déjà terminée et qu'elle est actuellement en cours de test. Vous pouvez absolument le personnaliser selon vos besoins. Vous pouvez ajouter un nom de responsabilité, vous pouvez ajouter une date, tout ce dont vous avez besoin ici. J'aime bien cela car de cette façon, nous pouvons déjà planifier tous les flux et ordonner différentes étapes que nous voulons construire en tant que prototype. Et nous pouvons également voir ce qui se passe lors des tests. Et ici, par exemple, les tests ont déjà été effectués et nous devons donc revenir en arrière et adapter le prototype. Il y a donc probablement des commentaires aux tests et je vais retravailler mon prototype en conséquence. De plus, comme cela est configuré sur un cadre, je peux simplement appuyer sur Play et l'utiliser comme diapositive de présentation. Et souvenez-vous également de notre petite astuce qui nous permet d' intégrer des cadres animés dans la présentation. Voici donc l' intégralité de mes prototypes, donc c'est mon cadre à défilement vertical, et je l'ai simplement placé dans ma présentation ici. Et maintenant je peux y jouer. Éteignons celui-ci. Et je peux le parcourir. Je peux cliquer sur des éléments individuels et je peux vraiment configurer mon design de cette manière. Et je peux également montrer ma vue d'ensemble avec les flux. Je peux donc avoir une présentation qui inclut mon prototypage. 42. DOCUMENT : 02 Partager les liens prototypes: Vous pouvez également inviter des personnes à consulter votre fichier ou simplement votre prototype en leur envoyant un lien. Il y a peu de choses à prendre en compte lorsque vous faites cela. Vous pouvez inviter des personnes directement via le lien de partage vers votre fichier de prototypage. Ils devaient ensuite appuyer le bouton Play voir le prototype en action. Maintenant, la plupart du temps, vous ne voulez peut-être pas que des personnes figurent dans votre fichier de conception. Vous voulez juste leur présenter le prototype. Et il se peut que cela se trouve simplement sur votre prototype en tant que tel , intégré à la vue de présentation avec des flux différents. Il peut également s'agir d'une présentation que vous avez configurée et qui peut être consultée et cliquée en mode Présentation. Ainsi, au lieu de partager l'intégralité du fichier, en mode prototypage, notez comment le bouton change pour partager le prototype. Ainsi, dans notre fichier de conception, vous verrez qu'il s'appelle simplement Partager. Ensuite, dans notre vue de prototypage, Partager le prototype, si nous cliquons dessus, nous ne partagerons que le lien vers cette vue de prototypage. Il inclura tous les flux que vous avez configurés. Avant de partager notre prototype, nous voulons nous assurer qu' il est configuré exactement de la manière dont nous voulons que la personne à l'autre bout le voie. Ainsi, sous option, nous pouvons choisir la taille dans laquelle nous voulons exposer notre prototype. Ensuite, nous pouvons également choisir d' afficher ou de masquer nos flux. Ainsi, tout ce que nous avons configuré ici sera stocké dans notre lien de partage. Et puis la personne à l'autre bout obtiendra exactement ces paramètres. Cela n'inclut pas uniquement les paramètres dans la vue de prototypage. Si nous revenons à notre conception, n'oubliez pas que nous pouvons, sur le prototype, afficher les paramètres du prototype afin que vous puissiez entendre la couleur d'arrière-plan définie. Et plus important encore, nous pourrions configurer un appareil. Cependant, vous devez faire un peu attention à cela si vous travaillez uniquement, par exemple en mode mobile. Et maintenant, revenons en arrière. Ensuite, nous pouvons ajouter un appareil autour de celui-ci, ce qui est vraiment très agréable pour une présentation. Cependant, si vous mélangez mobile et ordinateur de bureau, remarquez ce qui se passe ici, car dans notre vue de bureau, nous serons en fait intégrés à cet appareil. Donc, si vous mixez des appareils, assurez-vous que votre appareil est réglé sur Aucun. Je vais revenir au premier flux lequel je voulais commencer. Et je peux maintenant appuyer sur Partager le prototype. Donc, ici, je peux inviter par e-mail, ou je peux également définir la préférence pour le lien. Et ici, vous pouvez choisir entre modifier, visualiser et être un prototype. Désormais, si vous invitez avec la possibilité de modifier, cela signifie que les utilisateurs ont un accès complet à votre fichier et peuvent modifier votre design. Cela peut également entraîner des coûts supplémentaires pour les nouveaux éditeurs. Soyez donc très prudent quand et si vous partagez celui-ci. La visualisation est gratuite, mais cela signifie que les utilisateurs peuvent voir l'intégralité de votre fichier de conception. Maintenant, nous voulons rester à Kent View Prototypes. Nous ne partageons donc que la vue du prototypage, Nous ne partageons donc que y compris notre aperçu des flux. Et je peux désormais inviter par e-mail ou définir le lien, et simplement copier un lien et l'envoyer. Dès que des personnes saisissent votre fichier, vous pouvez également toujours modifier leurs droits. Ainsi, toute personne disposant du lien peut désormais simplement ouvrir ce lien dans son navigateur ou accéder cette application Figma si elle l'a ouverte. Et vous verrez que même s'ils ne sont pas connectés, ils ont un petit aperçu et peuvent toujours parcourir votre prototype. Avec le lien. Vous pouvez également ouvrir le prototype si une application FIG my est installée sur votre appareil mobile. Maintenant, avec celui-ci, vous devez juste faire un peu attention, car taille d'écran que vous configurez dans Figma doit être la même que celle qui convient à votre appareil physique que vous utilisez. Sinon, il sera étiré ou resserré. Et cela pourrait conduire à des résultats étranges. 43. DOCUMENT : 03 Documenter les composants interactifs pour le transfert: Parlons de la façon dont nous pourrions documenter les interactions et Figma. Jusqu'à présent, nous avons examiné la façon dont nous communiquons notre configuration pour le prototypage en général. Alors, comment pouvons-nous montrer ces interactions d' une page à l'autre. Mais je pense que nous avons également vraiment besoin de communiquer et surtout de documenter les micro-interactions. Alors, que se passe-t-il lors du survol et des différents états intégrés à nos composants interactifs ? Vos composants peuvent être stockés dans le même fichier sur une page séparée, ou ils peuvent se trouver dans un fichier complètement différent et vous les extrayez dans des bibliothèques partagées par fil. Alors que je travaille sur un exemple vraiment simplifié juste pour vous montrer comment configurer la documentation, je n'ai ici que quelques composants et je les enregistre simplement sur leur propre page. D'ailleurs, si vous souhaitez déplacer composants d'une page à l'autre, vous ne pouvez pas simplement les copier et les coller. Vous devez sélectionner le ou les composants en question, cliquer avec le bouton droit de la souris, puis passer à la page. Et vous pouvez sélectionner la destination vers laquelle vous souhaitez les envoyer. Nous allons donc utiliser cette carte à titre d' exemple et je vais vous montrer comment documenter cela et comment communiquer l'interaction et les petites animations qui se produisent au sein du composant pour que vous puissiez passer au développement. Il s'agit donc d'un ensemble général d'utilisation, mais vous pouvez tout à fait l' adapter à vos besoins. Mais allons-y étape par étape. Donc, tout d'abord, je prends tous les composants mentionnés, et je les déplace sur ce cadre que j'ai installé. Et remarquez qu'il s'agit toujours d'un ensemble de composants. Mais dès que vous le déplacez vers un cadre les petits composants enregistrés ici disparaissent. Je passe donc à autre chose et vous pouvez voir que j'ai cette configuration. J'ai donc un en-tête que les données utilisent toujours. Dans ce cas, c'est une carte sympa, je vais lui donner un numéro. Et voici la documentation. J'ai un petit tampon ici. Il s'agit donc également d'une variante selon laquelle j'ai configuré des ouvreurs pour vous dans un autre fichier. Vous pouvez donc voir ici qu'il y a différentes étapes. Je peux donc passer d'une situation qui s'avère trop difficile, ce qui arrive souvent, à des progrès et ainsi de suite. Celui-ci serait donc approuvé. Ensuite parce que j'ai déplacé mon composant principal à l'intérieur de ce cadre. Si nous accédons au panneau Ressources, vous pouvez voir qu'il possédait mes composants locaux, ceux que je n'ai pas déplacés sur un cadre qui flotte ici. Et dès que vous le déplacez vers le cadre, voici le nom du cadre ci-dessus. Ensuite, vous pouvez l'ouvrir et il sera bien rangé à l'intérieur. Cela va donc donner un très bel ordre à tous vos composants. Ensuite, ce que j'aime faire, c'est simplement extraire une instance. Je peux donc également avoir l'instance ici, car ici, par exemple, si nous jouions à cette feuille de documentation, nous verrions déjà l'animation se produire ici dans cette instance. Vous pouvez également ajouter d'autres informations. Donc, par exemple , j'aime bien avoir une capture d'écran. Vous pouvez donc voir ici toutes les propriétés de vos composants. Je vais juste l'ajouter ici, ajouter un petit effet, et vous pourrez alors avoir un très bon aperçu. Donc, même si tout le monde peut le voir, s' ils cliquent sur un composant, je précise tout de même que ce composant contient des propriétés différentes. Et l'une de ces propriétés concerne les différents états par rapport à ceux par défaut et vous pouvez passer à un survol. Je ne fais donc que le souligner à nouveau. Je ne veux pas parler davantage de la documentation générale car il s'agit d'un sujet différent dans un cours différent que vous pouvez suivre. Mais juste pour vous le montrer, je vais le parcourir. J'ai donc configuré mes spécifications ici. Vous pouvez donc voir toutes les mesures, comment tout se comporte. Et je peux toujours donner quelques informations textuelles. Et c'est en fait une partie qui m'intéresse en ce moment. Voici donc mon animation. Donc, ce que je fais, c'est simplement avoir un exemple ici. Donc, une valeur par défaut , puis l'état de survol. Et je dis ici en survolant cela réduira les 800 millisecondes. Et puis ici, dans mes boîtes d'informations, je peux simplement ajouter quelques informations supplémentaires. Je parle ici du déclencheur. Donc, dans mon cas, j'ai survolé et j'ai décrit l'action un peu plus en détail. Maintenant, je suis déjà en train de décrire cela en gardant un peu de CSS à l'esprit. Cela n'est pas nécessaire. Vous pouvez également simplement décrire ce qui se passe. Mais si vous voulez un peu de notation CSS ou toute autre notation de code, vous pouvez simplement passer à l'onglet Inspecter. Notez également que vous partagez en mode affichage uniquement avec votre développement. C'est donc ce qu'ils vont voir automatiquement. Et dès qu'ils sélectionnent un élément, ce sont leurs informations. J'ai donc simplement copié la notation CSS Backshadow. Par exemple, à partir de là, vous pouvez également passer à iOS ou Android en fonction de ce sur quoi vous travaillez. Si vous vous demandez d'où je suis arrivée à l'échelle de transformation, alors je voudrais vous montrer une petite astuce. Donc, à l'heure actuelle, dans mes composants, il est indiqué que les images ont exactement la même taille. Et puis au lieu de simplement modifier cela manuellement, vous pouvez sélectionner l'image et appuyer sur K. Et le bouton K ouvrira le menu de mise à l'échelle. Et maintenant, ici, vous pouvez choisir une taille. Vous pouvez également choisir par où vous souhaitez commencer. Je commence donc par le bas au milieu, puis j'ajoute 1,2, par exemple et il le redimensionnera de 1,2. Et maintenant, vous pouvez simplement utiliser cette échelle, qui sera la même que le CSS. Ensuite, ce que j'aime faire, c'est ajouter un petit bouton de lecture, car rien de tel qu'une démo pour faire passer votre idée. Et la façon dont je configure cela est de simplement dessiner un cadre et d'y ajouter une instance. Ainsi, l'instance contient toutes les interactions que vous configurez un nouveau composant dit Let me show you. Si je suis passé au prototypage, vous pouvez voir ici que c'est là mon interaction est configurée et héritera évidemment, comme toutes les autres instances, qu'elle héritera évidemment, comme toutes les autres instances, de ce comportement. Et maintenant, si je clique ici en arrière-plan, vous pouvez voir que c'est ce qu'on appelle l' animation de la voiture et que le flux s'appelle la carte. Et je peux simplement copier le lien. Et je peux maintenant ajouter le lien pour afficher les textes d'animation. Ainsi, dès que quelqu'un cliquait sur Play, celui-ci s'ouvrait dans ce flux et il pouvait voir la Micro Interaction sous la forme d'une petite démo. Vous pouvez bien sûr également créer un lien vers l'ensemble de votre document. J'ai donc un flux séparé juste ici. Et d'ailleurs, si vous appuyez sur Z, vous pouvez passer d'une vue à l'autre. Vous pouvez donc avoir une vue globale de la page ou simplement une vue détaillée. Et vous pouvez le constater dans l'instance, toutes les instances que vous utilisez réellement dans votre conception. Vous pourriez également voir leur interaction. Je créerais une page pour chaque composant que j'utilise. Et s'il y a une animation, j'ajoute la partie animation. Si vous n'avez aucune interaction et que vous n'en avez évidemment pas besoin. Si vous vous demandez, cette dernière partie concerne simplement le comportement réactif. C'est donc à peu près la façon dont mon composant et mon composant s'intégreraient dans le design à mesure que la taille de l'écran change. Vous pouvez donc voir ici que j'utilise une grille pour ma conception et que ce serait toujours le même élément en modifiant simplement le nombre de colonnes qu'elle occupe. Tester et documenter le comportement réactif est un vaste sujet distinct. Si cela vous intéresse, j'ai un tout nouveau cours d'apprentissage distinct à ce sujet. 44. DOCUMENT : 04 Intégrer des documents externes: Vous pouvez utiliser un système externe pour documenter votre conception et votre code dans votre fichier Figma et le partage Vous pouvez également sélectionner Obtenir code intégré, puis simplement copier ce code pour intégrer. Certaines applications se connectent également directement à Figma. Vous pouvez obtenir une liste des applications actuellement prises en charge sur le site Web de Figma. Cliquez ensuite sur Commencer, connectez Figma à d'autres applications, intégrez Figma. Et puis, à la toute fin de cette page, vous trouverez une liste de toutes les applications actuellement prises en charge. Et notez qu'il s'agit généralement d'applications basées sur un navigateur. Vous pouvez donc avoir votre documentation externe dans Notion, Dropbox Confluence. Et celui que j' aime vraiment, c'est Zero Highs. Je vais donc vous montrer un petit exemple la façon dont l'intégration fonctionne avec leur hauteur. L'un de mes favoris en matière de documentation était donc Zero Heights. C'est l'exemple du système de conception qui dure depuis dix ans et auquel vous pouvez accéder grâce à la conception à points de pelouse sur dix ans. Maintenant, nous allons cliquer sur numérique. Et cette page que vous voyez ici est entièrement intégrée à hauteur nulle. Nous voulons donc voir comment ils ont documenté leurs interactions. Cliquons donc sur Composants et sur un très beau détail ici également. Vous obtenez d'abord un aperçu de tous les composants et leur état actuel pour les différentes versions. Il suffit de cliquer sur le premier, un bouton et vous pouvez voir que nous pouvons choisir entre le Web, Android et iOS. Nous allons donc passer au Web tout de suite. Ensuite, ils ont mis en place leur documentation. Nous obtenons ainsi une anatomie générale du bouton, exemples d'utilisation, des spécifications, etc. Et ils sont hydratés, vous donne la possibilité ce qui vous donne la possibilité de le construire comme vous le souhaitez. Vous pouvez avoir des pages distinctes pour la conception et le code, ou vous pouvez les avoir toutes ensemble. Cela dépend vraiment de vous. Maintenant, ce que nous voulons voir, c'est comment ils nous montrent les aides à la récolte. Vous pouvez donc voir qu'ils appellent cela une vitrine. Et dans Showcase, il y a une intégration. Et vous pouvez voir les différentes aides à la récolte pour ce bouton. Revenons maintenant composants et vous pouvez voir que, par exemple passons à la carte. Ils relient également tout cela à Figma. Il peut donc revoir l'utilisation de l' anatomie. Et ici, malheureusement, nous ne voyons pas le comportement. Mais ce que j'ai, c'est vraiment sympa de vous montrer une petite vidéo sur la façon de l'utiliser dans Figma. Ils décrivent donc ici également comment les différents états sont utilisés. Et bien sûr, ils ont également une section qui explique comment les membres de l'équipe se connectent aux fichiers Figma. D'ailleurs, vous pouvez également avoir une copie de ces fichiers Figma et jouer avec eux Si vous ne faites pas partie de l'équipe de Decade Land, il vous suffit de vous rendre dans la section de la communauté Figma, de rechercher Decadron les dupliquer et de jouer avec eux. Essayons-le donc nous-mêmes. À leur hauteur. Nous pouvons obtenir un projet gratuit et l'essayer gratuitement. Et c'est mon projet gratuit et je peux simplement tout personnaliser à ce sujet ici. Et ici, vous pouvez voir la vue qui est déjà assez similaire à celle que nous avons vue avec Decadron. Donc, ce que j'ai fait, c'est au niveau des composants, j'ai juste ajouté une nouvelle page appelée carte et vous pouvez personnaliser toutes ces sections selon vos besoins. Vous pouvez donc voir ici que j'ai déjà téléchargé certaines choses et que cela fonctionne : vous pouvez vous connecter directement à votre fichier Figma. Et donc je l'ai déjà configuré ici. Vous pouvez voir qu'il suffit d'ajouter le lien vers votre fichier en zéro. Cela vous indiquera comment procéder. Ensuite, vous pouvez passer en revue tous vos éléments. Je peux donc passer en revue mes couleurs, mes styles, les importants, mes composants, mes différentes pages. Et donc tout ce que j'ai fait ici, que j'ai sélectionné une carte et vous pouvez voir qu'elle est déjà modifiée. Si je voulais ajouter l'avatar, je pourrais simplement sélectionner cette touche pour l'ajouter. Et puis vous pouvez voir qu'il téléchargerait tous les états de l'avatar. Il téléchargerait donc également un état par défaut et un état de survol pour moi. Débarrassons-nous de cela car nous ne voulons pas cela dans cet exemple. Vous pouvez donc voir ici que j'ai ma carte, donc mes différents états. Et avec les paramètres de mise en page ici, vous pouvez également le personnaliser. Je pourrais donc avoir différentes manières de l'afficher. Et je peux également ajouter ce que j' aime beaucoup dans les propriétés des composants. Vous avez donc ici le survol et la valeur par défaut en ce moment et vous pouvez également en ajouter d'autres et ajouter des nœuds, etc. J'ai donc ajouté mes spécifications ici, mais en fait je n'en aurais même pas besoin car vous pouvez simplement cliquer sur l'une de celles que vous importez depuis Figma, puis elle ouvrira son propre mode d'inspection. Ici, vous pouvez simplement cliquer sur les différents éléments et vous obtenez toutes les différentes informations en mode inspection. Donc, ici, vous pouvez également voir que sur cette page, je configure tout, depuis le design, depuis Figma. Ensuite, j'aurais une page séparée où, à partir du code, nous pourrions connecter le composant de la carte qui est codé. C'est donc vraiment une façon fantastique de tout rassembler sur une seule page. Et comme je l'ai dit, c'est une configuration que suggère une hauteur nulle. Vous pouvez également mélanger tout cela sur une seule page pour avoir design de votre Figma, puis le code de connexion ci-dessous, qui dépend vraiment de vous. Donc, plus bas, vous pouvez voir que j'ai téléchargé quelques exemples. Voici donc les images, afin que vous puissiez voir comment ce composant est utilisé. Nous n'en avons pas et ce que nous voulons ajouter maintenant, c'est le comportement d'interaction. Je veux donc d'abord ajouter mon prototype. Donc, si je clique sur Play, c'est le prototype que je veux ajouter. Donc, si je clique ici, cela mène à une nouvelle page et mes micro-interactions sont également intégrées. Je vais donc sur Share Prototype et maintenant je dois copier le lien pour une hauteur nulle. Je n'ai pas besoin d'intégration. OK, revenons à la hauteur zéro. Et je peux déjà voir pour afficher un prototype, utiliser des sections intégrées. Je clique donc ici et je dois sélectionner non pas du code, téléchargement du design, mais au lit. Et maintenant, je saisis simplement mon lien Figma ici. Et vous verrez qu'il charge directement mon prototype. Je peux maintenant ajuster la fenêtre à la taille que je souhaite. Agrandissons-le un peu , car vous pouvez voir qu'il est quelque sorte écrasé dans le haut. Alors maintenant tu peux bien le voir. Vous pouvez maintenant voir qu'il intègre mon prototype et je peux simplement cliquer dessus. Si vous avez d'autres flux, d'ailleurs, vous copiez le lien avec un onglet Flows ouvert depuis Figma. Ensuite, il vous montrera également les flux dans cet aperçu. Maintenant, je voulais également ajouter cette petite animation du composant de manière isolée. Je n'ai donc pas besoin de toute cette documentation car je peux configurer tout cela à une hauteur nulle. Ce que j'aime faire, je ne l' ai pas fait dans Figma, puis je copie, par exemple , ces éléments de plus de 20 m de haut pour les expliquer. Mais pour l'instant, je ne veux que celui-ci. Appuyons donc sur play pour accéder à l'onglet Prototypage. Maintenant, je vais fermer mes flux , sinon cela apparaîtrait et je veux juste le montrer. Et passons à Partager le prototype, copier le lien. Certains vont même l'ajouter en premier. Encore une fois, je dois utiliser Embed. Et puis je copie le lien que je viens de recevoir depuis mon aperçu. Et c'est la même chose qu'avant. Maintenant, nous pouvons ouvrir la fenêtre ici. Et cela va rester ainsi que vous l'avez configuré. Maintenant, j'ai cette petite interaction et vous pouvez voir mon composant en action. Voici donc à quoi ressemblerait notre page pour quiconque la visitait afin qu'il puisse voir que nous avons nos composants avec Inspect. Et puis, ci-dessous, nous avons nos exemples. À la fin, nous avons nos micro-interactions affichées, ainsi que notre prototype défilable cliquable ici. 45. Merci: Bravo d'avoir terminé ce cours. N'hésitez pas à nous contacter à moon learning dot io, nous sommes toujours intéressés à entendre vos commentaires. Vous feriez également une grande faveur si vous pouviez simplement prendre une minute et laisser un avis ici. Si vous avez apprécié ce cours , assurez-vous également de consulter nos cours supplémentaires. Chez Moody Learning point io. Nous abordons tous les sujets, des fondements de la conception de l' interface utilisateur UX à Figma , en passant par quelques notions de base du code. N'oubliez pas de visiter notre site Web à l'adresse Moody Learning point IO, où vous pouvez également vous inscrire à notre newsletter.