WEBVTT 1 00:02.880 --> 00:04.880 Parlons maintenant du prototypage. 2 00:05.040 --> 00:05.580 Dans Figma, 3 00:05.720 --> 00:08.060 lorsque vous cliquez sur le petit bouton de lecture en haut à droite 4 00:08.200 --> 00:10.940 coin, vous pouvez visualiser votre conception comme un prototype. 5 00:11.420 --> 00:13.280 Cela signifie que vous pouvez interagir avec votre conception 6 00:13.440 --> 00:15.920 basé sur l'action prototypée que vous avez définie. 7 00:16.260 --> 00:17.920 Vous pouvez naviguer entre les pages, 8 00:18.260 --> 00:18.900 boutons de survol, 9 00:19.400 --> 00:21.060 faites glisser les curseurs et bien plus encore. 10 00:21.920 --> 00:25.100 C'est idéal pour tester votre conception, le flux utilisateur et votre 11 00:25.180 --> 00:27.440 interactions pour voir si tout fonctionne bien ensemble 12 00:28.020 --> 00:29.680 et avoir une meilleure compréhension de ce que 13 00:29.760 --> 00:31.540 le site Web final ressemblera à. 14 00:32.128 --> 00:34.300 Le prototypage joue un rôle énorme dans mon processus de conception. 15 00:34.660 --> 00:38.160 J'aime tester mes créations et mes interactions à chaque étape du processus. 16 00:38.300 --> 00:42.580 Cela me permet de voir si ma conception fonctionne et si le flux utilisateur a du sens. 17 00:43.200 --> 00:49.720 C'est pourquoi je garde toujours une deuxième fenêtre ouverte avec une vue prototype à côté de ma fenêtre de conception pendant que je travaille sur la conception. 18 00:50.760 --> 00:53.504 Voyons quelques exemples de ce que vous pouvez réaliser avec vos prototypes. 19 00:56.140 --> 00:58.660 Tout ici est prototypé directement dans Figma. 20 00:58.820 --> 01:00.400 Vous pouvez créer des effets de survol, 21 01:00.720 --> 01:02.240 parallaxe, transitions de page, 22 01:02.700 --> 01:04.600 piste de souris, et bien plus encore. 23 01:05.080 --> 01:05.900 Comme vous pouvez le voir, 24 01:06.000 --> 01:08.140 vous pouvez créer des prototypes de très haute fidélité. 25 01:08.860 --> 01:10.800 Ceux-ci sont parfaits pour tester votre conception, 26 01:11.020 --> 01:14.300 mais également idéal pour présenter vos créations aux clients et aux développeurs. 27 01:15.000 --> 01:17.300 Avec un prototype réaliste et interactif, 28 01:17.920 --> 01:20.680 ils peuvent voir et expérimenter le design en action, 29 01:20.840 --> 01:24.220 ce qui peut les aider à mieux comprendre le flux du site Web final. 30 01:25.420 --> 01:28.080 Passons en revue les bases du prototypage dans Figma. 31 01:29.760 --> 01:32.760 Tous les prototypes commencent par une seule interaction. 32 01:33.080 --> 01:34.220 Pour créer une interaction, 33 01:34.360 --> 01:39.100 il vous suffit d'aller dans l'onglet prototype dans le coin supérieur droit ici. 34 01:39.260 --> 01:41.580 Vous concevez donc dans l'onglet conception, 35 01:41.800 --> 01:43.740 et quand vous êtes prêt à commencer le prototypage, 36 01:43.900 --> 01:46.400 vous passez à la vue prototype ici. 37 01:46.640 --> 01:52.600 Ou vous pouvez simplement cliquer sur Maj E sur votre clavier pour passer de l'un à l'autre. 38 01:52.900 --> 01:56.420 C'est donc quelque chose que vous faites une fois que votre conception est prête. 39 01:56.480 --> 01:59.420 Une fois que vous êtes prêt à commencer à prototyper certaines interactions, 40 01:59.840 --> 02:02.784 il faut toujours passer d'abord au prototype. 41 02:03.280 --> 02:05.720 Et puis chaque interaction a un déclencheur. 42 02:05.920 --> 02:08.100 C'est ce qui déclenche l'interaction. 43 02:08.200 --> 02:09.040 Et une action. 44 02:09.200 --> 02:10.900 C'est le résultat du déclencheur. 45 02:11.140 --> 02:18.580 L'interaction la plus simple que nous faisons habituellement dans le prototype est de faire la navigation entre les pages. 46 02:19.000 --> 02:21.620 Alors disons que nous avons un site Web avec de nombreuses pages. 47 02:21.760 --> 02:22.340 Dans ce cas, 48 02:22.340 --> 02:29.240 Je viens de créer deux pages différentes pour le site Karma et que nous allons utiliser comme exemple. 49 02:29.760 --> 02:33.160 pour nos astuces de prototypage que nous allons apprendre maintenant. 50 02:33.540 --> 02:36.120 Donc, lorsque nous avons un site Web avec de nombreuses pages, 51 02:36.400 --> 02:40.160 nous allons prototyper le menu afin que nous puissions naviguer à travers les différentes pages. 52 02:40.360 --> 02:43.560 C'est la base d'un bon prototype sur un site Web. 53 02:43.880 --> 02:46.380 Disons que nous sommes ici maintenant sur la page d'accueil, 54 02:46.680 --> 02:51.060 et je veux prototyper une action où lorsque je clique sur un projet particulier, 55 02:51.260 --> 02:52.600 sur ce projet ici, 56 02:52.740 --> 02:54.320 quand je clique sur le bouton découvrir, 57 02:54.600 --> 02:58.380 Je veux aller ici sur la page de détails du projet. 58 02:59.760 --> 03:04.992 Tout ce que j’ai à faire est de sélectionner le premier objet sur lequel je veux que l’action soit effectuée. 59 03:05.220 --> 03:07.080 Donc c'est mon bouton ici, 60 03:07.200 --> 03:10.060 Je vais aller dans l'onglet prototype. 61 03:10.300 --> 03:12.760 Et maintenant que j'ai activé l'onglet prototype, 62 03:13.080 --> 03:14.980 quand je survole mon objet, 63 03:15.120 --> 03:20.360 Je peux voir ces petits points chauds ici avec un signe plus qui apparaissent sur tous les bords, 64 03:20.640 --> 03:28.320 Je peux simplement passer d'un de ces points d'accès à l'autre page et la pointer vers celle où je souhaite placer mon prototype. 65 03:28.400 --> 03:29.420 Donc dans ce cas, 66 03:29.760 --> 03:31.420 Je vais juste sélectionner ici, 67 03:31.500 --> 03:33.320 Je peux sélectionner n'importe lequel de ces points d'accès, 68 03:33.440 --> 03:34.980 ça fonctionnera de la même manière. 69 03:35.140 --> 03:40.080 Et je vais simplement le faire glisser vers la nouvelle page que j'ai ici. 70 03:41.780 --> 03:43.440 Alors maintenant, comme vous pouvez le voir, 71 03:43.520 --> 03:45.560 il y a un lien entre les deux pages, 72 03:45.740 --> 03:48.900 une flèche allant de ce bouton à cette page. 73 03:49.160 --> 03:52.080 C'est parce que lorsque je vais cliquer sur ce bouton, 74 03:52.240 --> 03:54.040 Je vais atterrir sur cette page. 75 03:54.240 --> 03:55.500 Et comme vous pouvez le voir ici, 76 03:55.600 --> 03:58.940 J'ai une fenêtre qui s'est ouverte avec quelques fonctions différentes. 77 03:59.760 --> 03:59.860 Automatiquement, 78 04:00.320 --> 04:03.540 la première action qui est affichée est le clic, 79 04:03.660 --> 04:07.240 nous en verrons un peu plus dans quelques minutes. 80 04:07.440 --> 04:08.700 C'est ce que nous voulons, 81 04:08.800 --> 04:11.776 nous voulons que lorsque je clique sur ce bouton, j'aille ici. 82 04:12.060 --> 04:15.200 Nous devons donc naviguer et détailler le projet, 83 04:15.540 --> 04:17.380 c'est cette planche ici. 84 04:17.560 --> 04:18.800 Donc automatiquement, 85 04:18.980 --> 04:22.720 lorsque j'ai fait la sélection et que je l'ai fait glisser vers le nouveau plan de travail, 86 04:22.800 --> 04:27.240 il a compris que je voulais naviguer vers cette page lorsque j'ai cliqué dessus. 87 04:27.400 --> 04:29.630 Maintenant j'ai mon interaction 88 04:29.980 --> 04:30.120 fait. 89 04:30.368 --> 04:35.840 Tout ce que j'ai à faire si je veux voir cette interaction maintenant est de passer en mode prototype, 90 04:35.920 --> 04:39.200 mode de présentation, il me suffit de sélectionner le bon plan de travail. 91 04:39.380 --> 04:42.900 Si je sélectionne cette planche avec ma page d'accueil et que je clique sur le bouton de lecture, 92 04:42.980 --> 04:44.840 Je vais ouvrir cette planche. 93 04:44.980 --> 04:48.800 Mais si je sélectionne la page de détails et que je clique sur Lecture, 94 04:48.900 --> 04:50.560 c'est celui-ci qui va s'ouvrir. 95 04:50.860 --> 04:53.472 Je veux donc ouvrir ma page d'accueil, 96 04:53.840 --> 04:57.120 Je vais appuyer sur play pour voir le mode présentation. 97 04:59.760 --> 05:03.440 Très bien, donc maintenant j'ai ma page d'accueil que je vois ici, 98 05:03.620 --> 05:05.340 Je peux faire défiler la page d'accueil, 99 05:05.680 --> 05:07.040 et j'ai mon bouton. 100 05:07.220 --> 05:08.360 Comme vous pouvez le voir, 101 05:08.420 --> 05:09.780 quand je passe mon bouton, 102 05:09.880 --> 05:11.280 J'ai maintenant le curseur en forme de main, 103 05:11.440 --> 05:13.740 cela signifie que je peux réellement cliquer dessus. 104 05:13.860 --> 05:15.540 Si je clique dessus, 105 05:15.560 --> 05:17.460 Je passe maintenant à la page suivante. 106 05:17.600 --> 05:18.820 C'est donc aussi simple que cela. 107 05:18.960 --> 05:21.440 C'est le type d'interaction le plus simple que vous puissiez créer. 108 05:21.580 --> 05:25.560 Et c'est principalement à cela que le prototype a toujours servi. 109 05:25.680 --> 05:28.460 Mais maintenant, nous pouvons prototyper bien plus que cela. 110 05:28.560 --> 05:29.320 Voyons 111 05:29.760 --> 05:30.500 Que pouvons-nous faire d'autre ? 112 05:30.700 --> 05:31.540 Tout d'abord, 113 05:31.560 --> 05:35.520 l'une des choses que j'aime faire lorsque je fais mon prototype est ici dans les appareils, 114 05:35.700 --> 05:38.580 J'aime configurer les bonnes dimensions de l'appareil. 115 05:39.080 --> 05:42.420 Je vais donc y aller ici en taille personnalisée. 116 05:42.720 --> 05:44.140 Et en taille personnalisée, 117 05:44.340 --> 05:49.260 Je vais écrire les bonnes dimensions 1512 par 982. 118 05:49.440 --> 05:52.224 C'est la dimension de ma fenêtre d'affichage. 119 05:52.580 --> 05:53.660 Maintenant, lorsque je clique sur Play, 120 05:53.800 --> 05:55.820 Je vois la bonne dimension, 121 05:56.100 --> 05:58.240 l'utilisateur verra lorsqu'il atterrira sur la page. 122 05:58.368 --> 06:00.000 Et quand je commence à faire défiler, 123 06:00.400 --> 06:02.200 J'ai mon interaction sur mon bouton. 124 06:02.380 --> 06:07.620 Si vous n'êtes pas sûr de l'emplacement des interactions sur une vue prototype comme celle-ci dans la vue de présentation, 125 06:07.780 --> 06:10.800 si vous cliquez n'importe où où il n'y a pas d'interaction, 126 06:11.000 --> 06:14.620 il mettra en évidence les zones où une interaction est possible. 127 06:14.960 --> 06:16.680 Donc si je clique ici n'importe où, 128 06:16.860 --> 06:17.640 comme vous pouvez le voir, 129 06:17.660 --> 06:19.880 le bouton est surligné en bleu. 130 06:20.000 --> 06:22.360 Cela signifie qu'il y a une action à faire ici. 131 06:22.500 --> 06:23.420 Si je clique, 132 06:23.520 --> 06:25.280 maintenant je vais sur cette nouvelle page. 133 06:25.440 --> 06:27.480 Nous avons donc cette interaction qui est réalisée. 134 06:27.620 --> 06:29.680 Maintenant, une autre chose que nous voudrions peut-être aborder 135 06:29.760 --> 06:35.280 une fois que nous allons sur cette page, cela nous permet de revenir à la page précédente. 136 06:35.480 --> 06:38.160 Donc dans le menu ici, 137 06:38.320 --> 06:40.100 quand je clique sur le logo, 138 06:40.300 --> 06:42.620 Je veux revenir à la page d'accueil. 139 06:42.840 --> 06:50.640 Donc ce que je vais faire, c'est revenir à l'onglet prototype et simplement faire glisser mon logo vers la planche graphique de la page d'accueil. 140 06:50.800 --> 06:52.280 Comme vous pouvez le voir, 141 06:52.320 --> 06:54.060 la flèche va très bas. 142 06:54.180 --> 06:58.260 C'est parce qu'il pointe toujours vers le centre de la planche graphique. 143 06:58.420 --> 06:59.700 Donc c'est normal si 144 06:59.760 --> 07:00.560 ça descend. 145 07:00.700 --> 07:05.920 C'est juste parce qu'il pointe vers le centre de cette planche d'art ici qui est très haut. 146 07:06.180 --> 07:07.840 Et dans notre onglet ici, 147 07:07.980 --> 07:10.700 nous avons en un clic naviguer instantanément vers la page d'accueil. 148 07:11.000 --> 07:11.720 C'est parfait. 149 07:11.820 --> 07:12.560 C'est ce que nous voulons. 150 07:12.700 --> 07:14.272 Si nous cliquons sur Play, 151 07:14.624 --> 07:17.220 on peut faire défiler, cliquez ici, 152 07:17.740 --> 07:19.380 nous naviguons vers cette nouvelle page. 153 07:19.540 --> 07:21.360 Et si je clique sur le logo, 154 07:21.520 --> 07:22.640 comme vous pouvez le voir, 155 07:22.680 --> 07:24.080 Je retourne à la page d'accueil, 156 07:24.260 --> 07:27.220 mais à la même hauteur où j'étais auparavant. 157 07:27.620 --> 07:29.480 Parfois, c'est ce que tu veux. 158 07:29.760 --> 07:30.240 Mais dans mon cas, 159 07:30.540 --> 07:32.680 parce que nous naviguons d'une page à une autre, 160 07:32.860 --> 07:33.600 Je ne veux pas de ça. 161 07:33.660 --> 07:35.580 Je veux aller en haut de la page. 162 07:35.700 --> 07:38.300 Il vous suffit donc, en mode prototype, 163 07:38.940 --> 07:42.000 assurez-vous de sélectionner la position de défilement de réinitialisation. 164 07:42.440 --> 07:45.100 Cela signifie que lorsque nous allons sur une nouvelle page, 165 07:45.280 --> 07:47.600 nous allons aller en haut de la page. 166 07:48.140 --> 07:51.240 Je vais faire la même chose avec celui-ci ici. 167 07:51.680 --> 07:53.680 Réinitialiser la position de défilement. 168 07:54.100 --> 07:57.080 Maintenant, si je navigue d'une page à une autre, 169 07:57.300 --> 07:59.460 il ira toujours en haut de la page. 170 08:00.010 --> 08:00.800 D'accord. 171 08:00.820 --> 08:02.860 C'est donc l'interaction la plus simple que vous puissiez faire. 172 08:02.940 --> 08:05.540 Voyons quelles autres interactions nous pouvons faire. 173 08:05.680 --> 08:06.820 Allons-y ici. 174 08:07.040 --> 08:13.060 Je vais simplement sélectionner un élément et nous pouvons voir que nous avons un onglet d'interaction ici. 175 08:13.220 --> 08:19.720 Une façon de créer une interaction est, comme nous venons de le voir, de sélectionner le point d'accès et de pointer vers une autre planche graphique. 176 08:19.900 --> 08:23.500 Je pourrais également créer mon interaction directement ici. 177 08:23.680 --> 08:26.260 Supprimons donc l’interaction que nous venons de faire. 178 08:26.380 --> 08:26.920 Et à la place, 179 08:27.320 --> 08:29.120 cliquons sur le signe plus ici. 180 08:30.320 --> 08:32.480 Cela crée une nouvelle interaction. 181 08:32.780 --> 08:34.280 Ainsi, lorsque nous créons une nouvelle interaction, 182 08:34.480 --> 08:36.032 Nous devons décider de quelques choses. 183 08:36.340 --> 08:38.140 Nous devons décider quel sera le déclencheur. 184 08:38.280 --> 08:43.980 Le déclencheur est l’action que l’utilisateur devra effectuer pour activer notre interaction. 185 08:44.260 --> 08:45.260 Dans ce cas, 186 08:45.320 --> 08:46.500 nous faisons le onClick, 187 08:46.580 --> 08:49.440 mais il existe d'autres fonctions ici parmi lesquelles nous pouvons choisir. 188 08:49.700 --> 08:52.540 Si nous ne voulons pas que l'action se produise lors d'un clic, 189 08:52.540 --> 08:55.100 mais onDrag, lorsque nous faisons glisser une image, 190 08:55.260 --> 08:58.592 par exemple, ou un curseur, nous pouvons sélectionner onDrag. 191 08:58.860 --> 08:59.740 Si nous voulons 192 08:59.760 --> 09:04.900 je veux que l'action se produise uniquement à la seconde où le curseur survole le bouton. 193 09:05.080 --> 09:06.680 Donc, lorsque je passe la souris sur le bouton, 194 09:06.800 --> 09:09.504 L'action se produira immédiatement. 195 09:09.700 --> 09:12.280 Nous pouvons sélectionner en survolant. 196 09:12.640 --> 09:14.560 Il y a la gâchette pendant que vous appuyez. 197 09:14.880 --> 09:16.320 C'est quand j'appuie, 198 09:16.420 --> 09:17.860 pas quand j'ai appuyé. 199 09:18.280 --> 09:21.380 Il y a une différence entre le clic que j'appuie et celui que je relâche. 200 09:21.620 --> 09:23.500 Appuyer, c'est quand j'appuie, 201 09:23.540 --> 09:24.920 mais je ne l'ai pas encore publié. 202 09:25.000 --> 09:28.440 Nous pouvons donc décider que l'action se produise à la seconde où nous appuyons. 203 09:28.620 --> 09:29.248 Parfois, 204 09:29.800 --> 09:32.940 certains boutons sur certains sites Web auront un état de survol, 205 09:33.220 --> 09:35.100 un état de pression et un état de clic. 206 09:35.520 --> 09:38.460 Nous pouvons décider d'avoir une clé ou une manette. 207 09:38.680 --> 09:43.600 Ceci est utile lorsque nous voulons que l’interaction démarre lorsque nous appuyons sur une touche de notre clavier. 208 09:43.880 --> 09:45.120 Alors les flèches, 209 09:45.300 --> 09:47.920 disons que lorsque je clique sur la flèche droite, 210 09:48.000 --> 09:50.800 Je veux passer à l'image suivante dans le curseur, 211 09:50.960 --> 09:51.616 Par exemple. 212 09:51.960 --> 09:55.960 Vous pouvez ensuite créer cette interaction à l’aide de la fonction clé. 213 09:56.260 --> 09:59.440 Lorsque vous sélectionnez la fonction clé, vous devez 214 09:59.760 --> 10:02.080 écrivez la touche en question sur le clavier. 215 10:02.340 --> 10:02.944 Dans mon cas, 216 10:03.020 --> 10:04.520 Je viens de faire la flèche droite. 217 10:04.680 --> 10:05.376 Cela pourrait être une lettre, 218 10:05.568 --> 10:07.700 Cela pourrait être la barre d'espace, cela peut être ce que vous voulez. 219 10:08.260 --> 10:09.760 Je vais revenir ici. 220 10:10.180 --> 10:12.440 Il y a onMouseEnter. 221 10:12.560 --> 10:19.520 La différence entre while hovering et MouseEnter est que l'action se produira lorsque nous utiliserons MouseEnter. 222 10:19.680 --> 10:21.920 Et même quand je souris, 223 10:22.180 --> 10:24.240 l'action aura déjà eu lieu, 224 10:24.320 --> 10:25.780 donc il restera appliqué. 225 10:26.176 --> 10:28.120 Quand je le fais en planant, 226 10:28.380 --> 10:29.640 la différence est que 227 10:29.760 --> 10:34.180 l'action ne sera prise en compte que pendant mon survol. 228 10:34.300 --> 10:35.580 Donc si je passe la souris sur le bouton, 229 10:35.720 --> 10:36.960 cela activera l'action. 230 10:37.140 --> 10:39.680 Mais à la seconde où je sors du bouton, 231 10:39.820 --> 10:43.240 l'action reviendra en arrière et reviendra à l'étape initiale. 232 10:43.540 --> 10:44.820 Nous avons MouseLeave. 233 10:44.960 --> 10:51.740 Nous pourrions prototyper MouseEnter et MouseLeave et obtenir le même type d'effet que celui que nous obtiendrions lors du survol. 234 10:51.960 --> 10:53.160 Nous avons MouseDown. 235 10:53.380 --> 10:55.240 C'est un peu comme si on appuyait sur la touche "en même temps". 236 10:55.440 --> 10:56.220 Souris vers le haut. 237 10:56.448 --> 10:59.060 C'est quand on relâche le duvet. 238 10:59.840 --> 11:01.340 Et nous avons AfterDelay. 239 11:01.420 --> 11:05.380 Nous souhaiterions donc peut-être qu’une action se produise automatiquement après un délai. 240 11:05.520 --> 11:16.300 Disons que je suis sur la page de destination ici et que je souhaite accéder automatiquement à la page de détails après deux secondes ou après trois secondes. 241 11:16.520 --> 11:18.880 C'est quelque chose que nous pouvons prototyper très facilement. 242 11:19.100 --> 11:25.000 Je vais donc simplement supprimer cette action que j'ai sur mon bouton et simplement faire le clic normal ici. 243 11:25.100 --> 11:27.680 Le clic normal permettra de voir les autres détails par la suite. 244 11:29.760 --> 11:32.460 Donc si je veux avoir un délai et passer à la page suivante, 245 11:32.600 --> 11:36.080 tout ce que j'ai à faire est de créer une interaction ici. 246 11:36.300 --> 11:38.700 Sélectionnez AfterDelay. 247 11:38.800 --> 11:41.420 Et le voici en millisecondes. 248 11:41.760 --> 11:43.820 Donc si je veux que ce soit après trois secondes, 249 11:44.040 --> 11:46.340 J'écrirai 3000 millisecondes. 250 11:46.784 --> 11:48.640 Et après 3000 millisecondes, 251 11:49.080 --> 11:50.720 alors je peux sélectionner l'action, 252 11:50.820 --> 11:51.860 Ce que je veux qu'il arrive. 253 11:52.020 --> 11:52.720 Dans mon cas, 254 11:52.720 --> 11:56.896 Je souhaite simplement accéder à la page détaillée du projet. 255 11:57.184 --> 11:59.600 Alors maintenant, si je teste 256 11:59.840 --> 12:05.200 mon prototype, on arrive sur la landing page et automatiquement au bout de trois secondes, 257 12:05.380 --> 12:06.860 nous passons à la nouvelle page. 258 12:07.020 --> 12:10.800 Cela peut également être très utile pour créer des interactions plus complexes. 259 12:11.296 --> 12:15.120 Je vais simplement supprimer celui-ci pour le moment. 260 12:15.320 --> 12:22.060 Voici donc les différents types de déclencheurs que nous pouvons appliquer à tous les éléments que nous sélectionnons dans le prototype. 261 12:22.320 --> 12:23.620 Cliquer, faire glisser, 262 12:24.040 --> 12:25.952 en vol stationnaire après un délai. 263 12:26.176 --> 12:29.640 Voyons maintenant les différentes actions que nous pouvons appliquer. 264 12:29.760 --> 12:31.072 Donc c'est ça le déclencheur. 265 12:31.320 --> 12:35.880 L’action est ce que nous voulons réellement voir se produire lorsque nous cliquons sur quelque chose. 266 12:36.100 --> 12:37.780 Nous avons donc la navigation vers, 267 12:37.940 --> 12:39.680 comme ce que nous avons déjà vu ici. 268 12:39.900 --> 12:43.860 C'est ce que nous sélectionnons lorsque nous voulons passer d'un plan de travail à l'autre, 269 12:44.040 --> 12:45.500 d'un cadre à l'autre. 270 12:45.760 --> 12:49.240 C'est généralement ce qui est utilisé lorsque nous naviguons entre les pages. 271 12:49.500 --> 12:52.580 Nous avons ici une option de retour. 272 12:52.832 --> 12:59.000 Le retour est utile lorsque nous voulons simplement revenir à la page précédente en cliquant sur ce bouton. 273 12:59.760 --> 13:02.340 Alors disons que je suis ici sur ma deuxième page. 274 13:02.540 --> 13:05.040 Créons un bouton retour. 275 13:05.160 --> 13:07.140 Je vais simplement copier ce bouton ici. 276 13:07.420 --> 13:08.256 Pour l'instant, 277 13:08.480 --> 13:11.168 Je vais y répondre à l'intérieur. 278 13:11.456 --> 13:15.200 Peut-être que je vais retourner la flèche. 279 13:15.872 --> 13:20.880 Et quand je clique sur ce bouton pour revenir à la page précédente sur laquelle j'étais, 280 13:20.920 --> 13:23.780 dans mon cas, ce sera la page de destination car je n'en ai qu'une. 281 13:24.000 --> 13:28.128 Mais cela est utile lorsque nous ne savons pas nécessairement quelle était la page précédente. 282 13:28.340 --> 13:29.640 Nous ne pouvons donc pas simplement pointer du doigt le 283 13:29.760 --> 13:31.020 page de destination à chaque fois. 284 13:31.060 --> 13:32.980 Il faut revenir à la page précédente. 285 13:33.180 --> 13:34.100 Dans ce cas, 286 13:34.560 --> 13:36.320 tout ce que j'ai à faire est de créer une nouvelle interaction, 287 13:36.800 --> 13:37.460 Décochez. 288 13:37.920 --> 13:40.080 Je veux revenir en arrière, 289 13:40.140 --> 13:41.300 réinitialiser la position de défilement. 290 13:41.680 --> 13:44.520 Je vais donc revenir à la page précédente. 291 13:44.760 --> 13:47.440 Je peux cliquer ici, 292 13:47.600 --> 13:48.544 aller sur cette page, 293 13:48.768 --> 13:53.360 et je peux cliquer sur mon bouton de retour et revenir automatiquement à la page précédente. 294 13:59.760 --> 14:00.980 Bouton retour pour l'instant. 295 14:01.180 --> 14:02.120 Je n'en ai pas besoin. 296 14:02.240 --> 14:05.640 Et voyez quelles sont les autres actions possibles. 297 14:05.940 --> 14:07.960 Si nous revenons à ce prototype, 298 14:08.360 --> 14:11.380 nous avons navigué jusqu'à ce que nous sachions que nous sommes de retour. 299 14:11.540 --> 14:13.100 Nous avons défini des variables. 300 14:13.240 --> 14:14.920 C'est un peu plus avancé. 301 14:15.160 --> 14:15.880 Les variables, 302 14:16.180 --> 14:20.820 les conditionnels sont toutes des fonctionnalités où vous pouvez définir des paramètres 303 14:21.340 --> 14:22.700 et modifiez ces paramètres. 304 14:22.880 --> 14:23.560 Par exemple, 305 14:23.560 --> 14:27.160 Je pourrais créer une variable où mon panier est vide. 306 14:27.360 --> 14:29.480 Encore un où mon panier est plein. 307 14:29.760 --> 14:32.160 Et en cliquant sur le bouton ajouter au panier, 308 14:32.460 --> 14:36.540 Je pourrais changer la variable de mon icône pour que l'icône change. 309 14:36.720 --> 14:42.780 C'est génial lorsque vous souhaitez interagir avec un élément de la page et modifier un autre élément de la page. 310 14:43.000 --> 14:45.780 Mais c'est un peu trop avancé pour ce cours. 311 14:45.980 --> 14:50.300 Nous n'allons donc pas rentrer trop dans les détails de ces fonctions pour l'instant. 312 14:50.540 --> 14:57.440 Il y a la fonction de défilement ici lorsque vous avez des ancres sur une page. 313 14:57.580 --> 14:59.740 Alors disons que nous sommes sur la page d’accueil. 314 15:00.020 --> 15:00.140 Ici, 315 15:00.544 --> 15:02.340 Je vais juste supprimer le flux ici. 316 15:02.440 --> 15:05.040 Nous sommes sur la page d'accueil et nous cliquons sur les projets. 317 15:05.280 --> 15:09.860 Ce que je veux, c'est simplement faire défiler jusqu'au premier projet que nous avons ici. 318 15:09.980 --> 15:10.960 Parce que sur la page d'accueil, 319 15:11.180 --> 15:12.800 nous avons quelques projets différents. 320 15:13.020 --> 15:14.360 Pour ce faire, 321 15:14.360 --> 15:16.420 tout ce que j'ai à faire c'est encore une fois, 322 15:16.560 --> 15:23.100 sélectionnez notre petit point d'ancrage ici et pointez vers la section que nous voulons. 323 15:23.240 --> 15:24.140 Dans mon cas, 324 15:24.140 --> 15:28.060 Je veux accéder à cette section ici lorsque je clique sur le projet. 325 15:28.320 --> 15:29.600 Comme vous pouvez le voir, 326 15:29.820 --> 15:30.688 il a ouvert la fenêtre, 327 15:31.100 --> 15:32.640 Décochez, faites défiler jusqu'à. 328 15:32.820 --> 15:37.420 Il a donc automatiquement compris que ce que je voulais était une option de défilement. 329 15:37.660 --> 15:42.600 J'aurais aussi pu simplement procéder manuellement et sélectionner « Défiler vers ». 330 15:42.780 --> 15:45.260 Mais parce que je veux souligner une section particulière, 331 15:45.420 --> 15:46.720 c'est juste beaucoup plus simple. 332 15:47.020 --> 15:50.688 Et nous avons ici différentes options que nous verrons dans une seconde. 333 15:50.760 --> 15:55.400 Mais voyons ce qui se passe maintenant si je passe en mode présentation avec mon ancre. 334 15:55.808 --> 15:57.900 Lorsque je clique sur le projet maintenant, 335 15:58.060 --> 15:59.680 il défile automatiquement jusqu'à 336 15:59.760 --> 16:01.780 cette section ici que j'ai pointée. 337 16:02.060 --> 16:03.700 C'est parfait. 338 16:03.800 --> 16:04.560 C'est ce que nous voulons. 339 16:04.720 --> 16:08.060 Mais le fait qu'il saute dessus immédiatement, instantanément, 340 16:08.260 --> 16:10.780 Je pense que ce n'est pas génial pour moi. 341 16:10.800 --> 16:13.520 Je préférerais avoir un défilement fluide. 342 16:13.660 --> 16:15.000 Pour ce faire, 343 16:15.120 --> 16:19.800 encore une fois, je vais simplement sélectionner mon bouton et je vais aller dans les fonctions que nous avons ici. 344 16:19.980 --> 16:23.120 Et au lieu que l’action se déroule instantanément, 345 16:23.440 --> 16:25.856 Je vais vouloir qu'il soit animé. 346 16:26.340 --> 16:27.780 Donc en l'animant, 347 16:27.860 --> 16:29.520 Si nous revenons ici maintenant, 348 16:29.760 --> 16:30.540 comme vous pouvez le voir, 349 16:30.580 --> 16:31.620 nous voyons ce qui se passe. 350 16:31.780 --> 16:33.580 Nous voyons que nous défilons en fait vers le bas. 351 16:33.680 --> 16:36.020 Je pense que c'est beaucoup plus clair pour l'expérience utilisateur. 352 16:36.400 --> 16:40.220 Et nous pouvons également ajuster le timing de notre animation. 353 16:40.480 --> 16:41.800 Donc c'est assez rapide pour le moment. 354 16:42.100 --> 16:44.680 Peut-être que je veux que ce soit un peu plus long, 355 16:44.880 --> 16:46.640 un peu plus lisse aussi. 356 16:46.940 --> 16:49.660 Voici donc le timing de l'animation, 357 16:50.080 --> 16:50.780 300 millisecondes. 358 16:51.020 --> 16:52.400 Si je veux que ce soit plus long, 359 16:52.540 --> 16:55.800 Je peux simplement changer cela pendant peut-être 600 millisecondes. 360 16:55.920 --> 16:57.660 Donc ça va être deux fois plus long. 361 16:58.112 --> 16:59.008 D'accord. 362 16:59.760 --> 17:02.320 Si vous souhaitez tester le timing sur lequel vous travaillez, 363 17:02.440 --> 17:09.040 vous pouvez toujours survoler cette petite illustration ici et elle montre exactement le timing dont vous disposez en ce moment. 364 17:09.160 --> 17:10.860 Et pour l'assouplissement, 365 17:10.960 --> 17:15.100 c'est quand nous voulons de l'accélération et de la décélération dans notre mouvement. 366 17:15.340 --> 17:16.000 Tout de suite, 367 17:16.020 --> 17:17.160 nous devons juste nous en sortir. 368 17:17.240 --> 17:19.440 Cela signifie donc que nous n’avons pas d’accélération, 369 17:19.820 --> 17:21.700 mais nous avons une décélération à la fin. 370 17:21.720 --> 17:23.680 Ça ralentit un peu à la fin. 371 17:23.800 --> 17:26.280 Je préférerais être dedans ou dehors. 372 17:26.440 --> 17:29.520 Nous avons donc une accélération et une décélération. 373 17:29.960 --> 17:33.440 Je vais donc sélectionner "in out" pour mon assouplissement. 374 17:33.540 --> 17:36.860 Toutes ces fonctions sont différentes que vous pouvez sélectionner. 375 17:37.040 --> 17:39.900 Nous allons les parcourir tous en quelques secondes. 376 17:40.060 --> 17:40.620 Mais pour l'instant, 377 17:40.640 --> 17:43.456 sélectionnons simplement « Entrée et sortie faciles ». 378 17:43.648 --> 17:46.820 Alors maintenant, il y a un peu d'assouplissement au début et à la fin. 379 17:46.940 --> 17:48.032 C'est déjà plus fluide, 380 17:48.900 --> 17:49.312 Je pense. 381 17:49.600 --> 17:51.280 Mais je pense que ça pourrait être encore plus fluide. 382 17:51.520 --> 17:59.620 Quelque chose que j'aime faire souvent est d'aller dans l'option Bézier personnalisée ici et d'ajuster la courbe de vitesse 383 17:59.760 --> 18:00.860 que nous pouvons voir ici. 384 18:01.040 --> 18:06.420 Au lieu d'avoir la courbe naturelle que Figma fait pour faciliter l'entrée et la sortie, 385 18:06.656 --> 18:08.900 Je vais le rendre un peu plus fort. 386 18:09.160 --> 18:13.040 Je veux plus de décélération à la fin et plus d'accélération au début. 387 18:13.320 --> 18:15.260 Alors maintenant, si nous revenons ici, 388 18:15.840 --> 18:19.540 nous avons quelque chose de beaucoup plus doux qui semble vraiment naturel. 389 18:20.220 --> 18:21.860 J'aime donc ce mouvement ici. 390 18:22.180 --> 18:28.120 Les autres options que nous avons ici sont faciles à utiliser. 391 18:28.260 --> 18:29.580 Donc, la facilité sera de mise 392 18:29.760 --> 18:32.280 juste un assouplissement au début du mouvement. 393 18:32.480 --> 18:35.560 Nous allons donc procéder à un assouplissement au début, 394 18:35.720 --> 18:36.700 mais pas à la fin. 395 18:36.860 --> 18:38.960 Si nous allons nous détendre, 396 18:39.120 --> 18:40.440 ça va être l'inverse. 397 18:40.640 --> 18:42.640 Assouplissement juste à la fin. 398 18:42.880 --> 18:48.020 Donc, la décélération vers l'intérieur et vers l'extérieur est ce que nous venons de faire avec l'accélération et la décélération. 399 18:48.480 --> 18:49.560 À l'arrière, 400 18:49.740 --> 18:50.900 comme on peut le voir ici, 401 18:51.328 --> 18:56.980 on a un peu avant l'action prend un peu de place avant de faire le mouvement. 402 18:57.200 --> 18:59.040 Parfois, cela peut être intéressant. 403 19:00.030 --> 19:01.300 Détendez-vous, c'est à la fin. 404 19:01.540 --> 19:03.420 Nous avons ce genre d’effet de rebond. 405 19:03.840 --> 19:05.820 Entrez et sortez en douceur, 406 19:06.080 --> 19:10.120 c'est au début et à la fin qu'on a cet effet rebondissant. 407 19:10.688 --> 19:13.640 Donc, tout cela est intéressant en fonction du type de projet. 408 19:13.700 --> 19:16.780 Si nous voulons quelque chose d’un peu plus pétillant dans notre interaction, 409 19:16.920 --> 19:19.920 on peut continuer avec ça et avoir une petite interaction sympa. 410 19:20.220 --> 19:22.620 Si nous regardons cela maintenant, 411 19:22.820 --> 19:24.800 c'est un peu plus amusant, 412 19:25.200 --> 19:27.488 peut-être un peu trop pour ce projet particulier. 413 19:27.800 --> 19:28.520 Suivant, 414 19:28.580 --> 19:29.600 nous avons quelques préréglages 415 19:29.760 --> 19:31.220 qui sont également assez intéressants ici. 416 19:31.440 --> 19:35.180 Doux avec un peu de rebond à la fin. 417 19:35.320 --> 19:36.280 Rapide, 418 19:36.440 --> 19:37.400 un peu plus. 419 19:37.540 --> 19:39.300 C'est plus rapide et avec plus de rebond. 420 19:39.420 --> 19:40.400 Rebondissant, 421 19:40.480 --> 19:41.560 beaucoup de rebond. 422 19:41.680 --> 19:44.140 Si nous testons cela maintenant, 423 19:44.384 --> 19:48.992 C'est peut-être un peu trop pour un parchemin aussi. 424 19:49.340 --> 19:57.840 Et nous avons un ressort personnalisé avec lequel nous pouvons travailler les détails avec le rebond et tout ça. 425 19:57.960 --> 19:59.020 Pour moi, 426 19:59.060 --> 20:07.620 Je vais juste revenir en arrière avec facilité en entrant et en sortant pendant environ 600 millisecondes et ajuster un peu mes courbes. 427 20:07.880 --> 20:13.420 Je pense que ce mouvement est parfait. 428 20:13.720 --> 20:19.140 L’autre chose que nous voyons lorsque nous avons le parchemin, ce sont ces deux nombres que nous avons ici. 429 20:19.320 --> 20:20.000 Dans ce cas, 430 20:20.060 --> 20:23.320 si nous voulons avoir un décalage lorsque nous faisons défiler, 431 20:23.440 --> 20:25.312 ce qui signifie que lorsque je clique sur le projet, 432 20:25.728 --> 20:28.840 J'aimerais peut-être avoir un peu d'espacement en haut. 433 20:29.820 --> 20:32.300 Peut-être le même espacement que ce que j'ai sur les bords, 434 20:32.460 --> 20:34.720 pour qu'il ne soit pas parfaitement aligné en haut, 435 20:34.920 --> 20:37.220 mais nous avons un peu de place ici. 436 20:37.480 --> 20:41.360 Je souhaiterais donc peut-être ajouter cinq pixels avant. 437 20:41.860 --> 20:45.120 Je vais écrire moins 15. 438 20:46.140 --> 20:46.752 Ouais, 439 20:50.240 --> 20:51.000 Je pense que ça a l'air bien. 440 20:51.456 --> 20:52.416 Alors maintenant avec ce décalage, 441 20:52.800 --> 20:57.460 vous pouvez décider de ne pas être parfaitement aligné avec l'élément vers lequel vous faites défiler, 442 20:57.540 --> 20:59.700 ce qui peut être utile dans certains cas comme celui-ci.