WEBVTT 1 00:06.630 --> 00:10.420 L'option suivante que nous avions était le débordement de cadre, qui est utile lorsque vous avez un cadre, 2 00:10.540 --> 00:11.600 tu dois avoir un 3 00:11.600 --> 00:12.820 cadre pour que le débordement fonctionne. 4 00:13.340 --> 00:14.160 Comme dans ce cas ici, 5 00:14.220 --> 00:15.020 J'ai un curseur 6 00:15.580 --> 00:17.840 et vous devez avoir des éléments qui 7 00:18.020 --> 00:19.980 sortent de ce cadre. 8 00:20.980 --> 00:24.240 Si je regarde mon curseur en ce moment, j'ai un masque avec cette forme 9 00:24.928 --> 00:26.740 et mon curseur est aussi grand. 10 00:26.880 --> 00:32.300 C'est juste la taille ici mais quand j'enlève mon masque comme vous pouvez le voir, 11 00:32.600 --> 00:36.440 J'ai plus de contenu à l'intérieur qui sort du cadre. 12 00:36.640 --> 00:38.740 Donc, lorsque vous avez du contenu à venir 13 00:38.940 --> 00:45.640 en dehors du cadre, vous pouvez réellement activer le débordement et ce que cela fait automatiquement, c'est 14 00:45.640 --> 00:52.680 pas de défilement mais si vous activez le débordement horizontal c'est ce que je veux dans ce cas particulier du curseur. 15 00:53.824 --> 00:55.820 Maintenant, si je regarde mon curseur ici 16 00:56.420 --> 01:00.380 Je vais pouvoir contrôler le contenu à l'intérieur horizontalement. 17 01:00.860 --> 01:04.160 Cela signifie que si je le fais glisser, je peux passer à la diapositive suivante. 18 01:04.380 --> 01:07.960 Je peux également faire défiler vers la droite ou vers la gauche. 19 01:08.200 --> 01:12.100 C'est donc très utile lorsque vous souhaitez montrer au client qu'il s'agit d'un curseur. 20 01:12.260 --> 01:14.640 Dans notre cas ici, c'est à l'intérieur d'un masque 21 01:15.380 --> 01:17.220 mais il n’est pas nécessaire qu’il soit à l’intérieur d’un masque. 22 01:17.340 --> 01:20.040 Il pourrait s'agir simplement de quelques images les unes à côté des autres. 23 01:20.800 --> 01:22.320 C'est juste horizontal mais si vous 24 01:22.560 --> 01:29.520 sélectionnez, agrandissons-le plutôt pour que nous puissions voir ce qui se passe si notre cadre est plus grand à l'intérieur. 25 01:31.100 --> 01:32.740 Agrandissons les images à l'intérieur. 26 01:33.020 --> 01:41.260 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. 27 01:41.520 --> 01:45.220 Si je choisis les deux directions maintenant, je vais pouvoir 28 01:45.780 --> 01:47.700 va et tire dans les deux sens. 29 01:47.980 --> 01:52.360 Cela peut être très utile lorsque vous souhaitez afficher peut-être une grande grille d'images 30 01:52.480 --> 01:56.180 avec beaucoup d'images que vous pouvez faire glisser à gauche, à droite et en haut. 31 01:56.380 --> 02:03.560 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. 32 02:03.760 --> 02:04.780 C'est super facile à faire. 33 02:04.840 --> 02:14.900 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. 34 02:15.080 --> 02:19.640 Très bien, la dernière chose que je veux vous montrer est le prototypage. 35 02:19.740 --> 02:22.420 Nous avons déjà toutes les bases avec ce que nous savons 36 02:22.480 --> 02:22.660 ici. 37 02:22.940 --> 02:26.020 Nous pouvons déjà prototyper à peu près tout ce que nous voulons. 38 02:26.120 --> 02:29.260 Mais la dernière chose est la fonction d’animation intelligente. 39 02:29.580 --> 02:36.040 C'est probablement la fonction d'animation la plus puissante et la plus puissante que nous ayons ici en prototype pour Figma. 40 02:36.200 --> 02:46.260 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. 41 02:46.460 --> 02:52.340 En d'autres termes, cela signifie que si vous préparez correctement les cadres et que vous avez 42 02:52.500 --> 03:00.020 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é. 43 03:00.560 --> 03:04.920 Voyons ce que nous pouvons faire pour le bouton que nous avons ici pour le bouton de découverte. 44 03:05.152 --> 03:12.880 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. 45 03:13.060 --> 03:17.520 Nous verrons donc l'animation intelligente et comment réaliser un effet de survol en même temps sur les boutons. 46 03:17.700 --> 03:20.832 Donc ce que j’ai fait ici, c’est que j’ai un composant. 47 03:21.080 --> 03:22.320 Pour créer un 48 03:22.480 --> 03:25.320 composant pour l'instant je vais juste détacher ça. 49 03:25.480 --> 03:26.960 Disons que j'ai un bouton ici. 50 03:27.240 --> 03:32.560 Il vous suffit de cliquer sur créer un composant ici en haut et vous avez maintenant un composant. 51 03:32.880 --> 03:36.740 Je vais supprimer celui-ci car j'avais déjà un composant ici. 52 03:37.020 --> 03:44.840 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. 53 03:45.060 --> 03:48.800 Je vais donc dans les propriétés ici et je choisis la variante. 54 03:49.100 --> 03:51.880 Maintenant, j'ai cette boîte violette qui est apparue. 55 03:52.480 --> 03:54.980 Et cela me permet de créer plusieurs variantes. 56 03:55.340 --> 03:59.340 Pour les boutons, il est utile d'avoir parfois un effet de survol, 57 03:59.660 --> 04:03.660 un effet de clic, différentes étapes pour un composant principal. 58 04:03.920 --> 04:06.700 Dans mon cas, je vais simplement avoir deux effets différents. 59 04:06.880 --> 04:10.160 L'état par défaut d'origine et l'état de survol. 60 04:10.420 --> 04:13.240 Ce sera l’état de survol que nous avons ici. 61 04:13.400 --> 04:14.880 Et je veux animer mon bouton. 62 04:15.080 --> 04:22.400 J'ai déjà préparé mes calques pour que lorsque je change cela ici comme on peut le voir dans les calques ici 63 04:22.580 --> 04:24.460 J'avais déjà deux formes. 64 04:24.560 --> 04:31.160 J'avais ici mon cercle et mon rectangle arrondi qui sont visibles sur les deux variantes. 65 04:31.500 --> 04:44.840 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. 66 04:44.860 --> 04:46.100 Ils sont dans le même ordre. 67 04:46.300 --> 04:50.300 C'est ce qui est le plus important si vous voulez créer une bonne animation intelligente. 68 04:50.660 --> 04:52.360 Maintenant la seule différence 69 04:52.480 --> 04:55.080 entre les deux, c'est que j'ai rendu cette forme plus petite. 70 04:55.340 --> 04:58.820 Je vais aussi pousser cela un peu vers la droite. 71 04:59.560 --> 05:01.780 Voilà donc tout ce qu'il y a à dire pour le moment. 72 05:01.820 --> 05:03.720 Je viens de faire cette petite interaction. 73 05:03.900 --> 05:04.600 Très simple. 74 05:04.780 --> 05:08.200 Maintenant, ce que je veux faire, c'est prototyper cette interaction. 75 05:08.440 --> 05:15.552 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. 76 05:15.680 --> 05:17.824 Donc pas au clic mais au survol. 77 05:18.300 --> 05:21.780 Pour l'instant c'est instantané mais nous pouvons le tester. 78 05:21.840 --> 05:22.080 Et 79 05:22.480 --> 05:34.800 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. 80 05:35.000 --> 05:36.200 C'est donc ce que nous voulons. 81 05:36.380 --> 05:39.700 Appuyons sur Play ici et voyons ce que nous venons de créer. 82 05:40.240 --> 05:42.080 Vous voyez, c'est partout. 83 05:42.460 --> 05:43.800 Donc c'est parfait. 84 05:44.000 --> 05:48.460 Mais peut-être que je voudrais que ce soit un peu plus fluide, car pour l'instant, c'est instantané. 85 05:48.860 --> 05:52.120 C'est donc là que l'animation intelligente entre en jeu. 86 05:52.480 --> 05:57.520 Je vais revenir ici et au lieu d'un instantané, je vais choisir une animation intelligente. 87 05:57.800 --> 06:01.900 Figma recherche simplement des calques correspondants portant le même nom, 88 06:01.980 --> 06:06.940 le même ordre et comprend quelle est la différence entre les deux couches. 89 06:07.060 --> 06:18.980 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. 90 06:19.100 --> 06:22.144 Donc ça va s'animer entre ces deux-là 91 06:22.480 --> 06:22.860 fonctions. 92 06:23.000 --> 06:27.580 Les différentes propriétés prises en charge par Smart Animate sont l'échelle. 93 06:27.740 --> 06:29.680 Vous pouvez ainsi modifier l’échelle d’une forme. 94 06:29.820 --> 06:33.580 Je pourrais agrandir mon cercle ici en même temps. 95 06:34.800 --> 06:36.920 Soyons fous et rendons cela un peu plus grand. 96 06:37.080 --> 06:42.720 On peut jouer avec la position comme la flèche ici qui va un peu plus vers la droite. 97 06:42.820 --> 06:44.120 Nous pouvons jouer avec l'opacité. 98 06:44.460 --> 06:50.420 Peut-être que je veux que ce ne soit pas 100% mais 75% lorsque je survole. 99 06:50.620 --> 06:52.880 Nous pouvons jouer avec la rotation. 100 06:53.460 --> 06:56.140 Peut-être que ma flèche peut aller dans cette direction. 101 06:56.500 --> 06:58.220 Peut jouer avec le remplissage. 102 06:58.460 --> 07:07.740 Au lieu d'être bleu, je veux peut-être que cela devienne blanc et que ma flèche devienne bleue à la place. 103 07:08.220 --> 07:16.460 Et ce sont les cinq seules fonctions prises en charge par Smart Animate. 104 07:16.620 --> 07:17.700 Donc l'échelle, la position, 105 07:18.120 --> 07:18.560 opacité, 106 07:19.440 --> 07:20.420 rotation et remplissage. 107 07:20.600 --> 07:22.380 Pour tout le reste, tous les autres 108 07:22.560 --> 07:30.880 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. 109 07:31.140 --> 07:32.920 Voyons donc ce qui se passe maintenant. 110 07:33.160 --> 07:37.220 Ce sera peut-être un peu intense car il se passe beaucoup de choses. 111 07:37.460 --> 07:39.060 Maintenant, nous avons cet effet. 112 07:39.300 --> 07:40.560 Vous voyez, c'est très fluide. 113 07:40.840 --> 07:43.520 Nous avons un changement d'opacité, 114 07:43.860 --> 07:44.380 rotation. 115 07:44.900 --> 07:48.960 Il comprend que la flèche tourne et se déplace vers la droite. 116 07:49.040 --> 07:52.000 Il comprend que le cercle devient blanc. 117 07:52.480 --> 07:57.248 Donc il comprend vraiment tout et on peut jouer avec l'assouplissement comme d'habitude. 118 07:57.720 --> 08:00.440 Nous pourrions peut-être rendre cela plus facile à mettre en place et à retirer. 119 08:00.540 --> 08:02.720 Nous pourrions peut-être le rendre rebondissant si nous le souhaitons. 120 08:02.840 --> 08:05.980 Vous pouvez vraiment faire tout ce que vous voulez pour votre effet de survol. 121 08:06.280 --> 08:09.400 C'est extrême pour un survol d'un bouton. 122 08:09.500 --> 08:11.980 Je ne suis pas sûr que j'accepterais ça, mais c'est plutôt cool. 123 08:12.080 --> 08:12.700 Ça marche bien. 124 08:12.880 --> 08:17.580 Voyons ici un exemple d'animation intelligente plus complexe. 125 08:17.760 --> 08:22.260 Je ne vais pas entrer trop en détail dans la façon dont cela a été fait, mais pour 126 08:22.500 --> 08:28.400 la transition de page pour karma Je voulais animer et montrer au client ce qui se passerait pendant la transition de page. 127 08:28.740 --> 08:30.640 J'ai joué avec les mêmes éléments, 128 08:30.760 --> 08:31.560 les mêmes couches. 129 08:31.700 --> 08:34.020 Donc, sur chacun de ces quatre plans de travail, 130 08:34.180 --> 08:38.020 ces quatre cadres, nous avons toujours exactement les mêmes couches, 131 08:38.240 --> 08:44.380 les mêmes noms, le même ordre mais je change la position pour créer ma transition. 132 08:44.620 --> 08:52.460 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 133 08:52.480 --> 08:52.840 transition. 134 08:53.160 --> 08:58.304 Donc je vais faire une petite rotation et ensuite j'ai la dernière. 135 08:58.800 --> 09:08.240 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. 136 09:08.480 --> 09:20.020 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. 137 09:20.080 --> 09:20.260 Ouais. 138 09:20.320 --> 09:22.140 Quand je clique sur la page 139 09:22.480 --> 09:38.060 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. 140 09:38.160 --> 09:40.300 Je veux que toute cette partie s'agrandisse. 141 09:40.700 --> 09:51.160 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. 142 09:52.480 --> 09:57.680 Et une fois cette animation réalisée si on passe en prototype j'ai un délai d'une milliseconde. 143 09:57.800 --> 10:05.140 Donc, dès que cela est fait automatiquement, je passe à l'image suivante ici à nouveau avec une animation intelligente. 144 10:05.340 --> 10:13.660 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. 145 10:14.160 --> 10:21.760 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. 146 10:23.390 --> 10:24.060 Droite. 147 10:24.180 --> 10:26.500 Donc tout est là sur toutes les planches. 148 10:26.620 --> 10:30.880 Donc maintenant, une fois que tout est poussé vers la gauche, ça descend. 149 10:31.040 --> 10:34.600 Et puis, pendant quelques secondes, je charge la nouvelle page. 150 10:34.740 --> 10:38.360 J'ai donc une animation ici avec le cercle qui tourne simplement. 151 10:38.688 --> 10:46.600 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. 152 10:46.960 --> 10:52.380 Donc si nous jouons à nouveau cette transition, elle se charge pendant deux secondes. 153 10:52.864 --> 10:54.620 Ensuite, nous passons à l’étape suivante ici. 154 10:55.440 --> 10:57.780 C'est donc une transition de page très complexe. 155 10:58.100 --> 11:02.840 Mais cela montre simplement comment vous pouvez utiliser Smart Animate pour créer une animation très complexe. 156 11:03.220 --> 11:04.680 C'est un outil super puissant. 157 11:04.880 --> 11:17.620 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. 158 11:17.840 --> 11:22.120 Une fois que vous aurez compris ces principes fondamentaux de 159 11:22.480 --> 11:28.060 En tapant, vous pouvez vraiment pousser vos prototypes assez loin et vous rapprocher très près du site Web final développé. 160 11:28.380 --> 11:30.480 Vous ne pourrez pas tout prototyper. 161 11:30.920 --> 11:34.160 Par exemple, les effets de parallaxe ne sont actuellement pas pris en charge dans Figma. 162 11:34.320 --> 11:39.220 Cependant, je ne pense pas qu'il soit nécessaire de prototyper chaque détail de votre conception. 163 11:39.480 --> 11:43.760 En général, je ne prototype pas l'effet de survol de chaque bouton par exemple. 164 11:44.040 --> 11:45.600 C'est une question de gestion du temps. 165 11:45.940 --> 11:51.620 Et je me concentre généralement sur le prototypage d’éléments qui améliorent vraiment la compréhension de la conception finale. 166 11:52.480 --> 12:00.400 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. 167 12:00.500 --> 12:04.500 Alors faites-leur savoir que le site Web final développé sera encore meilleur. 168 12:04.660 --> 12:07.160 Mais au moins vous pouvez leur montrer des éléments collants, 169 12:07.540 --> 12:07.880 animation, 170 12:08.380 --> 12:12.940 effets de survol et bien sûr leur permettre un parcours utilisateur complet à travers toutes les pages. 171 12:13.380 --> 12:18.000 Nous aborderons ensuite des conseils pour présenter efficacement vos créations aux clients.