L'option suivante que nous avions était le débordement de cadre, qui est utile lorsque vous avez un cadre,
tu dois avoir un
cadre pour que le débordement fonctionne.
Comme dans ce cas ici,
J'ai un curseur
et vous devez avoir des éléments qui
sortent de ce cadre.
Si je regarde mon curseur en ce moment, j'ai un masque avec cette forme
et mon curseur est aussi grand.
C'est juste la taille ici mais quand j'enlève mon masque comme vous pouvez le voir,
J'ai plus de contenu à l'intérieur qui sort du cadre.
Donc, lorsque vous avez du contenu à venir
en dehors du cadre, vous pouvez réellement activer le débordement et ce que cela fait automatiquement, c'est
pas de défilement mais si vous activez le débordement horizontal c'est ce que je veux dans ce cas particulier du curseur.
Maintenant, si je regarde mon curseur ici
Je vais pouvoir contrôler le contenu à l'intérieur horizontalement.
Cela signifie que si je le fais glisser, je peux passer à la diapositive suivante.
Je peux également faire défiler vers la droite ou vers la gauche.
C'est donc très utile lorsque vous souhaitez montrer au client qu'il s'agit d'un curseur.
Dans notre cas ici, c'est à l'intérieur d'un masque
mais il n’est pas nécessaire qu’il soit à l’intérieur d’un masque.
Il pourrait s'agir simplement de quelques images les unes à côté des autres.
C'est juste horizontal mais si vous
sélectionnez, agrandissons-le plutôt pour que nous puissions voir ce qui se passe si notre cadre est plus grand à l'intérieur.
Agrandissons les images à l'intérieur.
Disons que j'ai quelque chose comme ça et que je veux sélectionner non seulement horizontalement, mais si c'est juste vertical, je vais simplement pouvoir le contrôler verticalement.
Si je choisis les deux directions maintenant, je vais pouvoir
va et tire dans les deux sens.
Cela peut être très utile lorsque vous souhaitez afficher peut-être une grande grille d'images
avec beaucoup d'images que vous pouvez faire glisser à gauche, à droite et en haut.
Ou si vous avez une carte Google dans votre conception et que vous souhaitez montrer que vous pouvez réellement faire glisser l'intérieur de la carte Google.
C'est super facile à faire.
Il vous suffit de faire en sorte que la carte soit plus grande que le cadre, puis vous pouvez activer le débordement dans les deux sens et vous pourrez faire glisser l'intérieur et faire glisser la carte à l'intérieur.
Très bien, la dernière chose que je veux vous montrer est le prototypage.
Nous avons déjà toutes les bases avec ce que nous savons
ici.
Nous pouvons déjà prototyper à peu près tout ce que nous voulons.
Mais la dernière chose est la fonction d’animation intelligente.
C'est probablement la fonction d'animation la plus puissante et la plus puissante que nous ayons ici en prototype pour Figma.
Il permet de comprendre quelle est la différence entre deux images et d'animer la transition entre ces images en fonction des calques visibles sur les deux images.
En d'autres termes, cela signifie que si vous préparez correctement les cadres et que vous avez
en faisant correspondre les calques, les noms et les ordres dans votre cadre, vous devriez pouvoir créer des animations de très haute complexité.
Voyons ce que nous pouvons faire pour le bouton que nous avons ici pour le bouton de découverte.
Il s’agit d’un bouton que nous avons partout sur la page et nous souhaitons peut-être un effet de survol au-dessus de ce bouton.
Nous verrons donc l'animation intelligente et comment réaliser un effet de survol en même temps sur les boutons.
Donc ce que j’ai fait ici, c’est que j’ai un composant.
Pour créer un
composant pour l'instant je vais juste détacher ça.
Disons que j'ai un bouton ici.
Il vous suffit de cliquer sur créer un composant ici en haut et vous avez maintenant un composant.
Je vais supprimer celui-ci car j'avais déjà un composant ici.
Et maintenant, si je veux créer un effet de survol au dessus de ce composant, tout ce que j'ai à faire est de créer une variable.
Je vais donc dans les propriétés ici et je choisis la variante.
Maintenant, j'ai cette boîte violette qui est apparue.
Et cela me permet de créer plusieurs variantes.
Pour les boutons, il est utile d'avoir parfois un effet de survol,
un effet de clic, différentes étapes pour un composant principal.
Dans mon cas, je vais simplement avoir deux effets différents.
L'état par défaut d'origine et l'état de survol.
Ce sera l’état de survol que nous avons ici.
Et je veux animer mon bouton.
J'ai déjà préparé mes calques pour que lorsque je change cela ici comme on peut le voir dans les calques ici
J'avais déjà deux formes.
J'avais ici mon cercle et mon rectangle arrondi qui sont visibles sur les deux variantes.
Il est important de construire la première variante en sachant parfaitement quelle sera l'animation afin que lorsque vous la dupliquez, vous vous assuriez d'avoir le même calque sur les deux variantes et qu'elles portent le même nom.
Ils sont dans le même ordre.
C'est ce qui est le plus important si vous voulez créer une bonne animation intelligente.
Maintenant la seule différence
entre les deux, c'est que j'ai rendu cette forme plus petite.
Je vais aussi pousser cela un peu vers la droite.
Voilà donc tout ce qu'il y a à dire pour le moment.
Je viens de faire cette petite interaction.
Très simple.
Maintenant, ce que je veux faire, c'est prototyper cette interaction.
Je vais donc revenir à mon onglet prototype et je veux que lorsque je passe la souris sur ce bouton ici, j'accède à ce bouton ici.
Donc pas au clic mais au survol.
Pour l'instant c'est instantané mais nous pouvons le tester.
Et
car c'est un composant partout où j'ai les mêmes copies de composants de mes composants principaux qui sont ici l'animation que j'ai créée va être sur chacune de ces copies du composant principal.
C'est donc ce que nous voulons.
Appuyons sur Play ici et voyons ce que nous venons de créer.
Vous voyez, c'est partout.
Donc c'est parfait.
Mais peut-être que je voudrais que ce soit un peu plus fluide, car pour l'instant, c'est instantané.
C'est donc là que l'animation intelligente entre en jeu.
Je vais revenir ici et au lieu d'un instantané, je vais choisir une animation intelligente.
Figma recherche simplement des calques correspondants portant le même nom,
le même ordre et comprend quelle est la différence entre les deux couches.
Donc Figma comprendra que dans mon premier cas ici le rectangle 175 fait 300 pixels de large mais dans mon deuxième il fait seulement 246 pixels de large.
Donc ça va s'animer entre ces deux-là
fonctions.
Les différentes propriétés prises en charge par Smart Animate sont l'échelle.
Vous pouvez ainsi modifier l’échelle d’une forme.
Je pourrais agrandir mon cercle ici en même temps.
Soyons fous et rendons cela un peu plus grand.
On peut jouer avec la position comme la flèche ici qui va un peu plus vers la droite.
Nous pouvons jouer avec l'opacité.
Peut-être que je veux que ce ne soit pas 100% mais 75% lorsque je survole.
Nous pouvons jouer avec la rotation.
Peut-être que ma flèche peut aller dans cette direction.
Peut jouer avec le remplissage.
Au lieu d'être bleu, je veux peut-être que cela devienne blanc et que ma flèche devienne bleue à la place.
Et ce sont les cinq seules fonctions prises en charge par Smart Animate.
Donc l'échelle, la position,
opacité,
rotation et remplissage.
Pour tout le reste, tous les autres
les changements que nous avons entre deux images qui ne proviennent pas de ces cinq propriétés vont simplement s'estomper dans le nouvel effet.
Voyons donc ce qui se passe maintenant.
Ce sera peut-être un peu intense car il se passe beaucoup de choses.
Maintenant, nous avons cet effet.
Vous voyez, c'est très fluide.
Nous avons un changement d'opacité,
rotation.
Il comprend que la flèche tourne et se déplace vers la droite.
Il comprend que le cercle devient blanc.
Donc il comprend vraiment tout et on peut jouer avec l'assouplissement comme d'habitude.
Nous pourrions peut-être rendre cela plus facile à mettre en place et à retirer.
Nous pourrions peut-être le rendre rebondissant si nous le souhaitons.
Vous pouvez vraiment faire tout ce que vous voulez pour votre effet de survol.
C'est extrême pour un survol d'un bouton.
Je ne suis pas sûr que j'accepterais ça, mais c'est plutôt cool.
Ça marche bien.
Voyons ici un exemple d'animation intelligente plus complexe.
Je ne vais pas entrer trop en détail dans la façon dont cela a été fait, mais pour
la transition de page pour karma Je voulais animer et montrer au client ce qui se passerait pendant la transition de page.
J'ai joué avec les mêmes éléments,
les mêmes couches.
Donc, sur chacun de ces quatre plans de travail,
ces quatre cadres, nous avons toujours exactement les mêmes couches,
les mêmes noms, le même ordre mais je change la position pour créer ma transition.
Et à quoi cela ressemble ici si je clique sur lecture, c'est que lorsque je clique sur un bouton n'importe où, je vais démarrer mon
transition.
Donc je vais faire une petite rotation et ensuite j'ai la dernière.
Il s’agit de la transition de page que nous avons sur le site Web et pour ce faire, tout ce que j’avais à faire était de créer ces quatre étapes différentes.
J'ai donc ma première étape ici où tous les éléments sont ici et que se passe-t-il lorsque je clique sur le bouton ? Je pense que c'est en fait lorsque je clique n'importe où sur la page que mon prototype démarre.
Ouais.
Quand je clique sur la page
J'ai une animation intelligente qui nécessite un certain assouplissement qui prend 600 millisecondes et qui va sur cette planche graphique ici parce que je veux tout d'abord que pendant ma transition, je veuille que cela déplace cette partie ici pour se déplacer vers la gauche.
Je veux que toute cette partie s'agrandisse.
Donc tout ce que j'ai fait, c'est que d'ici à ici, j'ai poussé ceci en dehors de la page et j'ai étendu cette couche ici pour qu'elle soit plus grande.
Et une fois cette animation réalisée si on passe en prototype j'ai un délai d'une milliseconde.
Donc, dès que cela est fait automatiquement, je passe à l'image suivante ici à nouveau avec une animation intelligente.
Et ce que je fais ici pendant 800 millisecondes, c'est que ce bloc de contenu que j'ai ici se déplace vers le bas.
Cette image que j'avais se déplace vers le haut et cette image qui est en arrière-plan se déplace vers le haut aussi.
Droite.
Donc tout est là sur toutes les planches.
Donc maintenant, une fois que tout est poussé vers la gauche, ça descend.
Et puis, pendant quelques secondes, je charge la nouvelle page.
J'ai donc une animation ici avec le cercle qui tourne simplement.
Et après deux secondes de chargement de la nouvelle page, le contenu se déplace légèrement vers le haut et les boutons apparaissent.
Donc si nous jouons à nouveau cette transition, elle se charge pendant deux secondes.
Ensuite, nous passons à l’étape suivante ici.
C'est donc une transition de page très complexe.
Mais cela montre simplement comment vous pouvez utiliser Smart Animate pour créer une animation très complexe.
C'est un outil super puissant.
Et une fois que vous avez compris comment cela fonctionne, le fait que vous avez vraiment besoin que tous les calques aient le même nom, soient dans le même ordre pour être présents sur les deux plans de travail, vous pouvez alors faire et animer beaucoup de choses différentes.
Une fois que vous aurez compris ces principes fondamentaux de
En tapant, vous pouvez vraiment pousser vos prototypes assez loin et vous rapprocher très près du site Web final développé.
Vous ne pourrez pas tout prototyper.
Par exemple, les effets de parallaxe ne sont actuellement pas pris en charge dans Figma.
Cependant, je ne pense pas qu'il soit nécessaire de prototyper chaque détail de votre conception.
En général, je ne prototype pas l'effet de survol de chaque bouton par exemple.
C'est une question de gestion du temps.
Et je me concentre généralement sur le prototypage d’éléments qui améliorent vraiment la compréhension de la conception finale.
Et il est également important d'expliquer au client, lorsque vous présentez le prototype, que tout n'est pas animé et interactif comme le sera le vrai site Web.
Alors faites-leur savoir que le site Web final développé sera encore meilleur.
Mais au moins vous pouvez leur montrer des éléments collants,
animation,
effets de survol et bien sûr leur permettre un parcours utilisateur complet à travers toutes les pages.
Nous aborderons ensuite des conseils pour présenter efficacement vos créations aux clients.