Prototypage et animations de Figma : concevoir des prototypes interactifs

1. Introduction: Bonjour les amis. m'appelle Tatiana et aujourd'hui je suis ravie de partager avec vous mes connaissances sur la création de prototypes et de figma. Le prototypage est devenu une compétence essentielle pour les concepteurs UX et UI. Comme pour les prototypes, vous pouvez montrer comment vos idées doivent fonctionner dans une application réelle ou une application mobile. En outre, avec le prototypage, vous pouvez mieux communiquer avec vos clients ou, par exemple, les développeurs qui devraient implémenter ou concevoir dans la vie réelle. Fondamentalement, ce cours a été créé pour tous les niveaux. Peu importe si vous débutez avec Figma ou si vous avez déjà travaillé avec le soufre pendant un certain temps. Nous commencerons par les bases du prototypage sur la façon de créer des interactions de base entre les écrans. Ensuite, nous passons à des sujets plus complexes, tels que la création d' interactions pour cliquer et faire glisser l'effet de survol. Nous parlerons également de différents types d' animations, y compris Smart Animate. La fin. Nous allons parler de la façon de travailler avec des composants interactifs qui sont très essentiels pour accélérer votre processus de prototypage. J'espère vous voir dans ma classe et profiter de mon premier tutoriel. 2. Les bases du prototypage dans Figma: Dans cette vidéo, nous allons parler de la façon de créer une interaction simple entre deux images. J'ai déjà préparé deux modèles différents pour une section héros et également pour nos produits. Ce n'est qu'une simple boutique fictive que nous allons travailler aujourd'hui. Sigma, comme vous le savez déjà, dans le bon onglet argent, vous verrez l'onglet Design. C'est essentiellement là que vous faites tout ce qui concerne votre conception, alignement, vos couleurs, votre typographie, etc. Ensuite, vous avez l'onglet Prototype. Et c'est en fait de cela que nous allons parler. Ils, ainsi que dans les prochaines vidéos, inspectent ce qui est simplement engagé si vous voulez connaître, par exemple, les paramètres CSS d'autres éléments. Ainsi, lorsque vous êtes dans la section de votre prototype et que vous sélectionnez votre cadre, vous pouvez immédiatement voir un point de fin ou l'icône Plus. C'est assez simple car lorsque vous appuyez dessus, vous voyez immédiatement une erreur indiquant que vous pouvez pointer vers une autre image comme celle-ci. Lorsque vous relâchez votre flèche, vous obtenez immédiatement les détails d' interaction assez réglables. Ainsi, dans ce cas, vous pouvez sélectionner l'enclave sur la piste et ainsi de suite. Mais dans cette vidéo, nous nous concentrerons uniquement sur l'interaction de base des clics et nous parlerons plus en détails sur l'animation et autres types d'interaction dans les prochaines vidéos. Pour supprimer, par exemple, l'interaction, sélectionnez une erreur et appuyez sur le clavier Supprimer. Dans mon cas, il sera plus logique de connecter le bouton Shop Now à la prochaine image. Alors, faisons-le rapidement. Sélectionnez le bouton Acheter maintenant et connectez ce bouton jusqu'à la prochaine image, comme cela. Le zoo peut voir ici, je peux accéder immédiatement au cadre de nos produits. Et si vous avez des cadres différents, vous pouvez donc facilement les sélectionner dans la liste ici. Très bien, connectons également le menu supérieur de la section de mon héros à la prochaine image comme celle-ci. Et bien sûr, si l' utilisateur est sur nos produits, il veut peut-être y retourner. Il suffit de connecter ce bouton. Revenez à notre image initiale, la section héros et à la même chose. Habituellement, lorsque l'utilisateur appuie sur le logo, vous verrez cette indirection que vous pouvez retourner à la page principale, est important de mentionner que si vous cliquez sur une zone de fond gris, vous peut immédiatement voir toutes les interactions qui se produisent entre nos deux images. Supposons que vous ayez décidé de changer d'interaction ou que vous avez peut-être commis une erreur. Vous pouvez facilement effectuer ces modifications en sélectionnant une flèche et en modifiant réellement les paramètres dans les détails de l'interaction ou dans une sous-section d'animation. Si c'est le cas, nous allons prévisualiser notre prototype et l'interaction. Pour ce faire, permettez-moi d'accéder à la barre de menu supérieure et d' appuyer sur l'icône actuelle. Très bien, nous sommes donc en mode présentation et testons rapidement si notre interaction fonctionne réellement. Lorsque je survole le bas ici, vous verrez que la flèche de la souris change et que cela indique que je peux cliquer dessus. C'est aussi simple que ça. Je suis également dirigé vers le cadre suivant de nos produits. Je vois que mon prochain bouton revenir en arrière fonctionne également, et c'est comme ça que je reviens. Essayons également rapidement si ce manuel fonctionne, nos produits. Oui, parfait, ça marche. Et l'interaction finale sera sur notre logo. Et oui, nous sommes également redirigés vers notre page d'accueil. Dans la vidéo suivante, nous parlerons davantage paramètres du mode de présentation et des appareils que vous pouvez utiliser pour visualiser vos prototypes. 3. Mode de présentation et appareils: Ici, j'aimerais partager avec vous quelques astuces dans le mode présentation que vous pouvez utiliser pour profiter la meilleure expérience de visionnage de vos prototypes. Lorsque vous ouvrez votre cadre, vous pouvez interagir avec elle. Mais par exemple, si vous n'êtes pas sûr ou si votre utilisateur n'est pas vrai clic droit, vous pouvez simplement cliquer n'importe où sur le cadre et vous obtiendrez des indications sur l'endroit où vous cliquez réellement. s'agit donc que des zones cliquables que vous pouvez utiliser. Bien sûr, lorsque vous survolez ces éléments, vous pouvez voir qu'ils sont également cliquables. Parlons ici des différentes options. Vous pouvez adapter votre cadre à la largeur différente de l'écran. Donc, la taille réelle signifie que votre cadre sera 100 % de ce qu'il devrait être. Donc, si votre image contient beaucoup plus de pixels que votre écran réel, vous ne le verrez pas complètement. Le meilleur que j'aimerais faire est ajuster la largeur ou, par exemple, le plein écran. Vous verrez ensuite un aperçu général. Aucune zone de votre image n'est effacée et vous pouvez facilement naviguer et la tester dans les options que vous pouvez, par exemple, désactiver les points d'accès dans OnClick. Ainsi, lorsque vous appuyez sur votre cadre, les indices nuls sont affichés. Lorsque vous l'activez. Maintenant, vous voyez à nouveau les indices. Vous pouvez masquer la barre latérale pour avoir une meilleure vue. Vous avez plus d'espace pour voir votre prototype, ce qui est également très utile. Bien sûr, le dernier est de montrer l'interface utilisateur Figma. Si vous êtes désactivé, vous ne voyez plus de paramètres. Pour le réactiver, vous pouvez voir l'indice de Figma, appuyez sur la barre oblique de Contrôle pour afficher à nouveau la chose que mon interface utilisateur, faisons-le. Ici, nous revoyons notre menu. Ce que j'aime également dans le mode présentation, c'est que vous pouvez collaborer avec les membres de votre équipe ou avec vos clients. Par exemple, la principale caractéristique est de partager le prototype. Lorsque vous appuyez sur un prototype précis, vous pouvez ajouter les e-mails des personnes à qui vous souhaitez voir votre prototype ou le modifier. Cela est très utile si vous souhaitez collaborer ensemble. Encore plus facile, vous pouvez réellement voir n' importe qui avec le lien ou, par exemple, modifier dans Figma comme s'il y avait des forfaits gratuits et payants. Et sur les plantes gratuites, vous avez une limite quant au nombre de personnes qui peuvent éditer et collaborer. Mais nous n'aborderons pas ce sujet ici. Vous pouvez facilement le lire dans un centre de santé de Figma et le dernier point que je voulais montrer ici est que vous pouvez ajouter des commentaires sur votre prototype en mode présentation. Par exemple, ajoutons quelque chose. Par exemple, lorsque le membre de votre équipe l'ouvre, il peut immédiatement voir que vous avez laissé un commentaire comme, Hé, je veux que la couleur de ce bouton soit facilement modifiée. Une autre personne peut soit répondre à votre commentaire, soit par exemple, commercialiser comme résolu également lorsque quittez le mode présentation, vous avez une phrase différente dans le prototype DEP. Ces paramètres ne sont visibles que si vous désélectionnez les cadres. Si vous sélectionnez le cadre, vous disposez de paramètres totalement différents ici. Désélections-le rapidement. Et l'un des paramètres les plus importants que je vais juste vous montrer est en fait l'appareil. C'est très utile car vous pouvez prévisualiser votre prototype sur l'appareil réel. Et dans ce cas, j'aimerais prévisualiser ma version mobile de l'écran de nos produits. Le cadre que j'ai créé est l'iPhone 11 Pro. Allons le vérifier. Vous pouvez immédiatement voir l'aperçu quoi il ressemblera. Vous allez, par exemple, modifier le modèle. Vous pouvez choisir un espace argenté, gris, vert minuit, mais gardons simplement l'or, par exemple. Vous pouvez également modifier le positionnement manière verticale ou horizontale. Et bien sûr, vous pouviez voir les flux. Et ici, nous pouvons soit copier un lien vers votre flux, particulier sélectionner le cadre du flux. Comme vous pouvez le voir, le premier flux est immédiatement redirigé vers le cadre de ma section héros. Et bien sûr, vous pouvez le jouer immédiatement. Oui, voyons comment notre deuxième flux est affiché sur un vrai appareil. Donc, ici, nous voyons comment notre version mobile de l'écran va être affichée sur un téléphone portable. Et c'est plutôt agréable à voir, surtout pour les marges latérales et les marges supérieures , de s'assurer que rien n'est coupé et que votre utilisateur bénéficiera la meilleure expérience de votre prototype. 4. Types d'animation.: Vous vous souvenez de notre simple interaction entre deux images que nous avons créées il y a quelque temps ? Eh bien, si vous vous en souvenez correctement, nous n'avons pas joué spécifiquement, aurions des paramètres des détails de l'interaction et des animations. Et aujourd'hui, je vais vous expliquer huit types d'animations différents que vous pouvez réellement utiliser dans vos prototypes. Par défaut, dans Figma, votre animation est définie sur instantanée et instantanée. En fait, votre transition prototype est assez large. Il n'a pas cette transition en douceur que vous voyez généralement dans de jolies applications et sites Web. Pour créer une transition plus fluide, je recommande toujours de commencer par les bases. Par exemple, en choisissant dissoudre l'animation, elle dissoudra l'animation. Vous pouvez avoir ces différentes courbes que vous pouvez sélectionner avec différents types de transmission. Par défaut, il est donc configuré pour faciliter la sortie. Et ici, vous pouvez définir différents types de retard. Par exemple, s'il ne s'agit que de 300 millisecondes, la transition sera assez rapide. Ce que j'aime chez Sigma, c'est qu' ici même sur cette boîte noire, vous pouvez immédiatement voir l'interaction, quoi elle ressemblera. Nous allons donc le tester rapidement sur nos prototypes. J'appuie donc sur Shop maintenant et je vois cette transition en douceur, mais c'était assez rapide ici. Allons l'augmenter à 1 seconde. Voici que la transition est plus petite et beaucoup plus lente. Dans ce cas, cela ne s'applique pas vraiment car il semble un peu étrange sur un site Web d'avoir une transition comme celle-ci. Mais il sera utile, par exemple, pour les diapositives. Si vous avez une présentation à faire , elle sera bien meilleure, plutôt qu'une simple animation instantanée. Le prochain type d'animation dont j'aimerais parler est Smart Animate. Smart Animate recherche des calques assortis entre deux images. Il reconnaît la différence et anime réellement ces calques entre les images. Je vais rapidement vous montrer comment cela fonctionne, mais nous aurons une autre vidéo spécialement dédiée à Smart Animate car elle est un peu complexe et il faut plus de temps pour expliquer. conséquent, il suffit de sélectionner l'option facile avec, par exemple, 800 millisecondes et vous verrez ce qui va se passer. Allons appuyer sur notre fond. Vous voyez que l'animation était assez compliquée. Figma a donc trouvé ces combinaisons entre les calques de texte. Et vous pouvez voir que nous avons eu cette interaction compliquée que lorsque les textes primaires montaient en quelque sorte vers le cadre suivant, l'animation suivante se déplace. Et vous pouvez voir qu'en fait notre ami est en train de se déplacer dans une direction différente. Et ce que j'aime dans ce type d'animation c'est que vous pouvez sélectionner la direction, qu'elle provienne du haut, du bas ou du côté. Ici, vous voyez que notre deuxième cadre est déplacé du côté gauche de notre premier cadre. Move out a une indirection très similaire, mais cela fonctionne autrement. Voyons rapidement à quoi ça ressemble. Bush a une animation et une interaction assez similaires. Vous pouvez également sélectionner différentes directions à partir desquelles la deuxième image est poussée sur la suivante. Mais je l'aime aussi parce que cela peut être vraiment une interaction agréable, surtout quand vous avez un site Web défilant. C'est vraiment génial, mais peut-être pour améliorer les choses, on peut augmenter le retard. Allons l'augmenter à 1600 millisecondes. Voici génial est pas mal de sites Web et de nos jours utilisez cette astuce quand ils veulent que l'utilisateur gaspille pourrait faire défiler vers le bas et obtenir ses interactions cool quand ils appuient sur le bouton. J'aime vraiment, vraiment ça. Donc, je n'ai pas travaillé exactement comme « Push by ». Il a cette sensation de glissière et il vient du haut vers notre cadre et le déplace ici. Vous pouvez également sélectionner différentes directions, mais permettez-moi de vous montrer rapidement à quoi cela ressemble. Donc, fondamentalement, notre cadre vient toujours du haut, mais il ne repousse pas le premier cadre, mais il vient en quelque sorte au-dessus de lui sous la forme d'une diapositive. Enfin, la dernière est glissante vers l'extérieur lorsque la première image est glissée et que la deuxième image apparaît exactement comme ça. Il s'agissait donc d'une interaction assez simple ici. Sur l'animation, vous allez avoir différents types d'interactions. Et par défaut, c'est facile, mais vous pouvez jouer et sélectionner différents paramètres. Mais par exemple, si vous souhaitez également une animation vraiment avancée, je vous recommande d'utiliser la personnalisation. Nous en parlerons plus tard plus en détail. Mais quelle coutume vous pouvez avoir une interaction plus avancée. Ici, vous pouvez voir cette courbe de force que vous pouvez modifier, par exemple, comme cela. Et vous verrez une animation totalement différente par rapport à la préconfiguration par défaut. Exactement comme ça. Vous pouvez voir que tout d' abord, c'était assez rapide, puis vous obtenez le retard. 5. Effet de survol: Aujourd'hui, nous allons parler de la création d'une animation survolée. Cette animation est extrêmement facile à faire et pour être honnête, c'est mon type d' animation préféré que vous pouvez faire en sigma. Ici, j'ai déjà créé un cadre avec une taille de bureau, et j'ai déjà trouvé une image avec des meubles. Imaginons donc que nous créions une animation de survol pour une boutique en ligne où vous vendez des meubles et que vous voulez afficher et que vous voulez afficher une animation vraiment cool quelqu'un survole essentiellement avec sa bouche. Pour commencer, copions rapidement cette image en dehors de notre cadre. Ici, nous allons apporter quelques modifications pour afficher notre état de vol stationnaire. Dans mon cas, j'aimerais ajouter un remplissage supplémentaire de couleur noire avec un pourcentage d' opacité de 30 %. J'ajouterai également un titre. Très bien, j'ai donc fondamentalement changé la police et la taille de celle-ci. Sélectionnons également les deux couches et plaçons les soufres minimalistes au milieu de l'architecture. Et si vous créez une boutique en ligne il est très important de passer un appel à l'action. Dans mon cas, je vais créer un bouton qui indique Acheter maintenant afin que les utilisateurs puissent immédiatement ouvrir la sélection de soufre, disons, et magasiner ceux qu'ils aiment. Déplacons notre calque de texte au-dessus notre calque rectangulaire pour qu' il soit affiché. Bien sûr, sélectionnons ces deux couches et créons un alignement au centre. Je vais également regrouper ces deux couches et je diminuerai également la taille de ce bouton. Je vais sélectionner mon image ainsi qu'un bouton pour les associer tous les deux au centre. Très bien, donc lorsque vous avez fini créer votre état de survol, sélectionnez tous ces calques, puis cliquez sur le bouton droit de la souris et sélectionnez Sélection de cadre. Il est vraiment important de ne pas simplement regrouper ces éléments, mais de les sélectionner comme cadre. Lorsque les deux états sont prêts, accédons à l'onglet Prototype et créons notre interaction. Bien sûr, je vais connecter la première image, l' état inactif, à notre état de vol stationnaire. Dans les détails de l'interaction, je vais sélectionner en survol, ce qui est tout à fait logique. important ici, c'est que nous ne sélectionnerons pas naviguer vers la mêlée, mais nous devrons sélectionner Ouvrir la superposition. Avec la superposition ouverte, cela signifie que l'outil calque que vous êtes pointé remplacera réellement les premiers calques. Dans ce cas, nous obtiendrons l'effet de survol parfait. Et bien sûr, dans une section de superposition, vous disposez de plusieurs fonctions. Mais ce qu'il est important de choisir ici , c'est manuel, car nous voulons nous assurer que notre image est un cadre exécutif, la même position que notre garde dans le cadre. Comme vous pouvez le voir, je peux déplacer la position de mon calque de survol dans une taille différente, ce qui signifie qu'il ne sera pas exactement au milieu de la première image pour notre expérience, pour notre test. Faisons ça exactement au milieu. Voyons immédiatement comment cela fonctionne. Donc, ici, je vais planer avec ma souris et regarder et voir un état de vol stationnaire différent , ce qui est parfait. Mais comme vous pouvez le constater également, que l'animation n' est pas tout à fait fluide. La raison en est en fait notre réglage d'animation car, par défaut, comme vous vous en souvenez dans les vidéos précédentes, est défini sur instantané. Mais dans ce cas, choisissons dissoudre et nous le garderons tel qu' il est avec un délai de 30 millisecondes par défaut et facilitons l' animation et vérifions rapidement son fonctionnement. Oui, comme vous pouvez le constater, c'est beaucoup plus lisse. Vous voyez que la transmission est bien meilleure et qu'elle semble plus naturelle. C'était donc le boréal à propos de l'animation survolée. On se voit dans la vidéo suivante. 6. Animation intelligent - 1ère partie (base): Aujourd'hui, nous allons en apprendre davantage sur Smart Animate dans Figma. Avec Smart Animate, vous pouvez vous connecter à images similaires et obtenir l'animation fluide entre elles. Mais pour vous illustrer plus précisément comment cela fonctionne, permettez-moi de vous montrer rapidement un exemple simple. En sigma. Créons deux cadres. Je sélectionnerai comme toujours le cadre mobile de l' iPhone 11 Pro Max. Je vais immédiatement dupliquer ce cadre pour plus de commodité. Créons simplement une forme simple, par exemple rectangulaire. Je vais placer mon rectangulaire sur le premier cadre en bas. Et je vais rapidement sélectionner une couleur aléatoire à remplir. Et je vais copier ce rectangle dans le deuxième cadre, mais je le déplacerai aussi vers le haut du cadre. Et aussi pour vous illustrer l'animation intelligente. Je vais faire pivoter cette forme à 180 degrés. instant, vous n'avez vu aucune différence visuelle, mais croyez-moi, dans notre présentation, vous le verrez certainement. Naviguons rapidement vers l'onglet Prototype et connectons nos deux cadres. Je vais donc simplement sélectionner au toucher, je vais créer une animation avec Smart Animate et quels sont les paramètres par défaut de facilité avec un délai de 300 millisecondes. Et faisons de même. Lorsque vous touchez de nouveau sur la même forme, vous revenez au premier cadre. Très bien, validons rapidement notre prototype. Je vais donc rapidement cliquer sur ma forme. Comme vous pouvez le constater, il est principalement tourné, mais je pense que le retard a été trop rapide. Revenons rapidement à notre dossier et modifions le délai à un plus grand nombre. Essayons encore une fois. Vous pouvez voir que notre forme est en rotation plus petite. Et je l'aime vraiment parce que vous pouvez créer tant d'animations complexes avec Smart Animate, mais juste pour vous donner un autre exemple à comparer. Que se passera-t-il si nous dissolvons simplement notre animation ? Y aura-t-il une différence ? Vous pourriez penser que oui, ce sera exactement la même chose, mais en fait, ce sera tout à fait différent. Alors j'écris ici, cliquons à nouveau sur notre forme. Et vous voyez que la rotation ne se produit pas. Et bien sûr, s'il n'a pas fait pivoter votre forme, cela n'a pas vraiment d'importance. Vous voyez simplement la transition en douceur, mais vous n'avez pas vu cet effet d'animation génial comme nous venons de le faire auparavant. Permettez-moi également de vous montrer comment Smart Animate fonctionne sur un exemple réel. 7. Animation intelligent - 2e partie (barre de menu): Imaginez que vous ayez déjà une section héros pour votre site Web. Dans mon cas, j'ai déjà préparé une mise en page de base et vous êtes invités à la copier ou à créer votre propre section de héros. Mais ce que je vais illustrer ici, c'est comment le menu hamburger se comportera avec Smart Animate lorsque l'utilisateur cliquera dessus. Sélectionnons rapidement notre cadre et dupliqué. Et dans la deuxième image, nous allons créer notre interaction sur la façon dont le manuel glisse du côté droit. Donc, tout d'abord, je prendrai ce menu de hamburgers et je vais le faire pivoter de 90 degrés. Et puis, bien sûr, je vais créer une boîte de menu. Colorions rapidement dans une teinte jaune plus foncée et ils oublieront de déplacer sous le menu des hamburgers parce que vous voulez le voir d'un coup. Je vais également modifier les couleurs pour que nous puissions voir très précisément notre menu de hamburgers. La dernière étape consisterait à écrire quelques éléments de menu. Je vais sélectionner tous mes calques de texte avec une boîte rectangulaire et les aligner sur le centre. instant, si nous connectons notre menu de hamburgers dans le prototype, nous ne verrons aucune animation spécifique, mais nous verrons simplement un très bon flux où l'argent apparaîtra. Permettez-moi de vous l'illustrer rapidement dans une étape prototype, connectons à nouveau notre menu hamburger onclick avec Smart Animate avec un délai de 800 millisecondes et la même chose ici. Lorsque je clique sur le bouton arrière, mon menu disparaîtra. Allons vite avec cette broche. Oui. Vous voyez donc que, fondamentalement, le manager est apparu lentement avec une transition en douceur. Mais ce que je veux réaliser, c'est que mon manuel se glisse du côté droit. Pour y parvenir, je vais prendre mon menu et je vais le copier dans la première image. Et sélectionnons ce menu dans les deux cadres et les déplacer en dehors de notre cadre est très important car vélo Figma suit toutes les interactions qui se produisent. Donc, si notre argent va sortir du bon côté, nous devons le déplacer dans notre premier, dans nos deux cadres. Et plus précisément dans la deuxième image, suffit de le déplacer comme il l'était initialement. Voyons rapidement si nous obtenons une meilleure transition. Oui, c'est donc ce que je voulais réaliser, c'est plutôt sympa. Et bien sûr, avec Smart Animate, vous pouvez créer des animations beaucoup plus difficiles et compliquées. Mais en tant que leçon de base, c'est un bon début d'exploration. Faites-moi savoir, les gars, si vous avez réussi à le faire et je suis curieux de voir vos œuvres aussi. 8. Défilement horizontal et vertical - application de photos: Bonjour les amis. Aujourd'hui, nous allons parler de la création d'une animation horizontale et verticale. Et plus précisément pour cette leçon, nous allons créer un écran simple pour l'application de voyage. Alors ouvrons rapidement Sigma, sélectionnons notre outil de cadre et sélectionnons le cadre préréglé du téléphone. Dans mon cas, je vais sélectionner l'iPhone Pro Max. J'ajouterai rapidement un titre. Réglons également la taille à 26 et aussi l'épaisseur du semi-gras. Je vais aussi créer un sous-titre et diminuer sa taille, bien sûr, ainsi que l' épaisseur à moyenne. La prochaine étape consisterait à créer des cartes de voyage que j'aimerais encore animer et les rendre disponibles dans le sens horizontal. Arrondissons également les coins. Juste ici. Je vais également écrire un texte. Par exemple, New York. Je vais également regrouper ces deux éléments et les copier. Très bien, juste pour plus de commodité, je déplacerai ces éléments en dehors du cadre à moins que le premier changement de nom ne soit rejeté. Je vais également sélectionner chaque rectangle et ajouter l'image correspondante. Fondamentalement, j'utilise le plugin Unsplash où vous pouvez rechercher un tas d'images différentes pour n'importe quel type de sujet que vous avez pour vos prototypes. Commençons donc par New York. Superbe. J'ai vraiment aimé ces images. Sélectionnons toutes ces cartes et, en cliquant avec le bouton droit de la souris, sélectionnons la sélection de cadres. Il est donc très important que nos éléments soient à l'intérieur d'un cadre et pas seulement à l'intérieur d'un groupe. Je vais sélectionner le cadre et déplacer rapidement ces éléments à l'intérieur de notre application pour créer les éléments pour le défilement vertical Je vais simplement copier le sous-titre et créer les voitures pour notre défilement vertical. Juste après l'avoir eu, tous ces éléments, bien sûr, je les mettrai en dehors de notre cadre pour faciliter les modifications. Changeons donc également les titres et les images de chacun de nos éléments de profondeur. Parfait. Sélectionnons à nouveau tous nos éléments, convertissons-les en cadre. Et bien sûr, ce cadre, je reviendrai à l'intérieur de l'écran de mon application. Parfait, donc notre écran d'application est prêt. Mais avant de procéder, le prototypage, laissez-moi vous raconter une astuce. Vous considérez que le cadre se situe en dehors du cadre de notre application. Et pour faire défiler notre défilement horizontal et vertical, nous devons modifier les bordures de ces cadres à la même largeur et à la même hauteur que notre application de voyage. C'est vraiment important car si vous laissez les images en dehors du cadre de votre application, l'animation fonctionnera. Je vais également le modifier comme ça. Lorsque vous accédez à l'onglet Prototype et que vous sélectionnez votre cadre, vous pouvez voir ici immédiatement l'onglet défilant débordant que le coffre est apparu. Par défaut, vous ne verrez aucun défilement. Cela signifie qu'aucune animation de défilement ne sera implémentée. Lorsque j'ouvre le menu déroulant. Pour ce cas, je choisirai le défilement horizontal. Il en va de même pour la prochaine image. Permet également de choisir le défilement de débordement vers le défilement vertical. Génial. Voyons comment cela fonctionne en action. Parfait. Il s'agit de notre application. Je vais faire défiler ces voitures et cela fonctionne sur le défilement horizontal est tout à fait parfait. Qu'en est-il de notre défilement vertical ? Il fait également défiler, mais je vois un débordement ici. Fondamentalement, ce cadre dépasse notre sous-titre et d'autres gardes de voyage, ce qui n'est pas comme ça qu'il devrait fonctionner. Pour résoudre ce problème, revenez à votre prototype, sélectionnez le cadre vertical. Et en fait, dans la section Design, il est très important que vous utilisiez la fonction de contenu du clip. Et lorsque vous découpez du contenu, cela signifie que le défilement ne dépasse pas les bordures du cadre, qui sont exactement définies ici. Voyons dans notre mode présentation les modifications que nous venons d'apporter. Comme vous pouvez le voir en ce moment, je fais défiler et essentiellement mes éléments et ne débordent pas, ils ne remplacent pas mes éléments d'opéra, ce qui est incroyable. C'était donc le tutoriel sur animation verticale et horizontale dans Sigma. 9. Superposition ouverte - application bancaire: Aujourd'hui, nous allons apprendre à créer des animations superposées dans Sigma. animations superposées sont particulièrement utiles pour les applications mobiles ou pour tout type de prototypes où vous souhaitez afficher un message contextuel. Par exemple, pour informer l' utilisateur que l'action a eu lieu ou pour avertir de l' erreur qu'il a commise, etc. Ils fonctionneront spécifiquement avec l'application financière que j'ai déjà préparée, mais ce n'est qu' un exemple pour vous montrer comment fonctionne l'animation. Créons ensemble une notification lorsque l'utilisateur appuiera sur le bouton sans échec, je créerai spécifiquement un nouveau cadre taille aléatoire en dehors du cadre de mon application mobile. Celui-ci sera donc nommé en tant que notification. Créons un titre ici, très bien joué. Très bien, et la dernière étape consistera à créer un bouton d'appel à l'action, qui sera beaucoup plus petit que celui-ci. Et nous allons simplement dire que ce groupe réunit tous ces trois éléments et les alignerons exactement au centre. Donc, spécifiquement pour cette notification, je vais également arrondir les coins ici à la valeur de dix. Et j'ajouterai également une ombre à cette image dans les effets, créons une ombre portée. À moins de vouloir trouver quelques paramètres ici, je vais flouter un peu plus et peut-être diminuer l'opacité de la couleur noire pour la rendre plus naturelle. Très bien, alors lorsque vous avez terminé votre notification, passons dans la section prototypage du type ici. Et nous allons retirer l'appareil car je ne veux pas voir d'appareil pour l'instant. Connectons notre bouton Enregistrer à nos notifications. Donc, lorsque je cliquerai sur ce bouton, j'aimerais voir ma fenêtre contextuelle. Mais dans ce cas, comme vous pouvez le constater dans l'interaction, le paramètre prédéfini est l'outil de navigation, mais nous aimerions le modifier superposition ouverte et en superposition ouverte. C'est là que commence le plaisir. Vous pouvez l'aligner au centre ou, par exemple, haut à gauche, en bas à gauche, etc. Voyons ce qui se passe lorsque nous sélectionnons essentiellement cette superposition centrale. J'appuierai sur mon bouton Enregistrer et je vois ma notification exactement au milieu car notre superposition ouverte était placée sur la position centrale. Mais si je veux une position plus personnalisée, je modifierai ma superposition en position manuelle. Dans le manuel, vous pouvez voir ici ma notification avec ces lignes transversales, ce qui signifie que c'est la position où je vais la définir sur mon écran. Je voudrais simplement le déplacer ici. Donc, plus la partie supérieure de mon prototype, voyons comment ça fonctionne. Permettez-moi d'appuyer rapidement sur Enregistrer et vous pouvez voir que ma notification contextuelle se trouve exactement à l'endroit où je l'ai définie. J'espère que ce tutoriel vous a plu et vous verrez au cours suivant. 10. Animation glissement - application de transfert: Auparavant, on travaillait principalement avec déclencheurs prototypes tels que onclick et survolent. Mais aujourd'hui, parlons de la façon de créer une animation qui se déclenchera sur le glissement. Ce type de déclencheur lui permet d' effectuer une action lorsque vous faites glisser un élément sur l'écran, je vais rapidement créer un titre. Changeons également la couleur du bleu. Créons également rapidement un bouton d'appel à l'action. Arrondissons aussi les coins à 20, et appelons-le aussi dans la couleur bleue. Parfait. Passons maintenant à la partie la plus intéressante. Nous allons créer un slider que nous allons animer avec l'animation Andrex. Je vais sélectionner l' outil rectangulaire et dessiner un rectangulaire très fin que nous présenterons la ligne de notre curseur. Arrondissons également les coins de celui-ci. Je vais changer le remplissage par la couleur gris plus clair. Je vais également copier le même rectangulaire et le modifier dans sa largeur. Et il est très important pour nous créer une animation ce qu'un curseur changera également une couleur lorsque le bas va se déplacer de l'autre côté. Remplissons-le rapidement dans la couleur bleu clair. Je vais le rendre encore plus petit. Et la dernière étape consistera à créer une ellipse. Cette ellipse nous permettra d'interagir pour notre animation sur piste. Bien sûr, pour ne pas oublier, nous devons également créer un numéro, essentiellement le numéro que nous voulons transférer à quelqu'un. Révisons rapidement quelques fictions ou chiffres. Par exemple, vingt-cinq dollars. Je vais l'aligner au centre, et je copierai également ce numéro pour créer cet effet explorable des chiffres changeant pendant que je fais glisser mon curseur. Ce poste n'a pas vraiment d'importance pour le moment, car nous allons le regrouper dans le cadre et le modifier. En gros, les contraintes seront différentes et ne se chevaucheront pas avec d'autres calques que nous avons dans cet écran. J'ai sélectionné tous mes calques de texte et je vais appuyer sur le clic droit de ma bouche et appuyer sur la sélection de cadres. Et c'est essentiellement le positionner un peu plus haut. Ce que nous allons faire, c'est que nous avons les marges de notre cadre, la boîte bleue autour de tous nos éléments. Et je vais juste faire glisser ces marges vers mon numéro initial comme ça. Mais dans ce cas, nous déversons, voyons d'autres nombres et ils se chevauchent avec d'autres couches. Pour résoudre ce problème, je vais couper du contenu. Comme vous pouvez le constater, d'autres chiffres viennent de disparaître. Je viens de regrouper tous ces éléments et je vais les aligner exactement au centre, peut-être un peu plus haut juste pour le rendre visuellement agréable. A moins de copier rapidement ce cadre et de créer l' état suivant de notre curseur. Dans ce cas, je vais simplement déplacer l' ellipse vers la droite, ici jusqu'au bord. Et dites ce qui va se passer avec notre deuxième rectangulaire de la diapositive. Je vais juste le faire glisser avec l'Ouest pour être aligné sur l'ellipse. Et celle-ci nous permettra de créer une belle animation indiquant que la couleur change lorsque l'ellipse est déplacée. Et aussi, regardons, oublions notre numéro. Donc, bien sûr, il a été glissé vers la droite et mélangé, notre nombre augmentera également. Ce que je vais faire à l'intérieur du cadre, je viens de sélectionner tous les calques de texte et je vais les déplacer vers le haut avec les touches fléchées. Exactement comme ça. En ce moment, nous avons deux de nos cadres. Passons à l'onglet Prototype et créons réellement notre interaction. Nous allons travailler avec notre ellipse. Nous allons connecter notre deuxième image dans les détails de l'interaction que je vais sélectionner sur Drag. C'est ce qui va se passer lorsque nous faisons glisser notre ellipse. Et bien sûr, pour l'animation pour meilleur effet visuel et aussi pour une transition en douceur, nous allons travailler avec Smart Animate, la même chose. Bien sûr, lorsque je fais glisser mon ellipse vers l'arrière, je vais passer à l' état initial dans ma première image, la même sur piste, naviguer vers le curseur est 0 image avec une animation intelligente avec un délai de 300 millisecondes. Nous allons donc rapidement valider notre prototype en mode présentation. Ici, où en mode présentation, et c'est assez excitant. Essayons donc de faire glisser notre curseur. Et comme vous pouvez le voir, les chiffres changent et le curseur se remplit d'une couleur bleu clair. C'est la vitrine parfaite de l'interaction médicamenteuse. Et cela a l'air vraiment sympa car vous pouvez avoir une simulation aussi réelle de l'interaction, par exemple, pour cette application bancaire imaginaire, voir dans le prochain tutoriel. 11. Composants interactifs - application des réseaux sociaux: Dans cette vidéo, nous allons créer des animations à l'aide de composants indirects. Les composants interactifs vous permettent de définir des interactions et des animations entre la variance dans l'ensemble de composants, ce qui signifie que les instances deviennent immédiatement actives en mode prototypage. Vous pouvez ainsi créer plus rapidement des éléments indirectifs réutilisables et réduire la complexité de votre prototypage, ce qui accélère généralement votre flux de travail de prototypage. Nous allons donc rapidement créer notre ensemble de composants interactifs. Ouvrez donc votre fichier Figma et passons immédiatement dans Plugins et sélectionnez l'icône. Si je me connecte, dans ce cas, j'aimerais ajouter un dur que je peux car j'aimerais créer une sorte d'application de médias sociaux où l'utilisateur peut aimer les images. Importons rapidement et je peux le voir ici. Juste pour les besoins de ce tutoriel, je vais dissocier ce cadre et, en fait, je dissocierai le groupe lui-même. Donc, au final, je n' ai qu'une couche vectorielle. Il s'agira d'un état inactif, mais nous devons créer deux autres états, qui signifie que ce qui se passera lorsque l'utilisateur passera le curseur sur l' icône et ce qui se passera lorsque l'utilisateur cliquera sur l'icône. Nous allons dupliquer cette icône deux fois. Tout d'abord, je vais travailler avec un état de vol stationnaire. Donc, pour ce cas, je vais créer, remplir et sélectionner la couleur a du sens est la plus dure de rose. Mais permettez-moi de copier rapidement ce code couleur pour moi-même. Et cela réduira l'opacité à 30 %. Il en va de même pour l'état onclick. Je vais créer, remplir puis copier le collage exactement de la même couleur. Mais dans ce cas, l'opacité sera alimentée à 100%. Lorsque vous avez fini de créer votre état, sélectionnez toutes ces couches et accédez à la barre de menus supérieure où vous voyez les composants. Je peux l'ouvrir et sélectionner Create Component Set. Il est donc important de ne pas créer un composant parmi les trois éléments, mais l'Ukraine, un ensemble de composants. Ici, vous voyez immédiatement les bordures avec les pointillés. Cela signifie que votre jeu de composants est créé. Avant de commencer le prototypage, il sera judicieux de renommer notre variance à l'intérieur de l'étape des composants. Donc le premier sera par défaut bien sûr, mais le second, je mettrai la propriété en survol. Et le troisième aura la propriété. Cliquez sur. Lorsque vous avez fini de renommer votre variance. Passez à l'onglet Prototype et créons notre interaction. Bien sûr, à partir de l'état inactif, je suis aussi l'état de survol, ce qui signifie que pendant le survol, ma variante va changer la propriété en survol. Vous pouvez le voir ici avec un menu déroulant, vous pouvez passer à un autre enjeu, mais dans ce cas, le survol a le plus de sens. L'animation que je vais sélectionner et animer intelligemment avec les paramètres par défaut de facilité et un délai de 300 millisecondes. Alors, bien sûr, passons à l'état suivant. Donc, quand je clique dessus, j'ai également cliqué dessus. Voici l'animation intelligente comme dans l'exemple précédent. Et bien sûr, si l' utilisateur désélectionne notre icône, nous revenons à notre état inactif, ce qui signifie que le même cliquerait sur les états de clic que nous revenons à la valeur par défaut. Cet ECS que nos composants de directive sont créés ici. Et créons rapidement un écran de téléphone mobile simple avec notre application de médias sociaux de base. Je vais immédiatement sélectionner notre variante par défaut et copier en dehors du cadre de jeu de composants. J'appuierai sur l'Alt et le glisserai sur mon cadre de médias sociaux. Et bien sûr, je vais sélectionner ces deux éléments et les copier pour créer plus de la même variance pour simuler un flux de médias sociaux, ça semble très bien. Et la dernière étape sera bien sûr de payer quelques images avec mon plugin préféré appelé Unsplash. Mettons quelques images au hasard ici. Parfait, et si nous avons tout fait correctement, cela signifie que nous n' aurions pas à connecter de fils en dehors de notre cadre. Nous pouvons simplement passer immédiatement mode présentation et voir comment notre icône modifie son état. Génial. Vous pouvez voir que je survole, je clique, je peux aimer l'image. Je peux en aimer un autre. Je peux encore en aimer un autre. Et bien sûr, je peux le différer si je le veux. C'est vraiment incroyable car mon flux de travail est beaucoup plus facile que si je vais simplement créer un autre cadre et que je connecterais chaque icône à ce cadre, etc. Ce qui est également utile dans les composants interactifs c' est que vous pouvez les partager avec votre équipe. Par exemple, si vous avez plusieurs pages dans votre fichier de projet, vous pouvez toujours trouver la même icône dans vos ressources. Dans vos essais, vous pouvez voir les composants locaux et vous pouvez simplement les faire glisser et les afficher sur une autre page. Cela simplifie vraiment le flux de travail. Par exemple, si vous collaborez avec différentes personnes, elles peuvent également utiliser la même icône, le même composant interactif via le fichier sur lequel vous travaillez ensemble.