Tutoriel Framer : 7 microinteractions simples pour améliorer vos prototypes

Bienvenue dans le deuxième volet de notre série de didacticiels Framer. Dans le dernier article, nous avons appris les bases de l'utilisation de Framer en mode Conception, ainsi que la façon d'écrire du code simple pour donner vie à nos conceptions. Dans cet article, nous nous concentrerons sur l'utilisation de Framer pour créer des micro-interactions et des transitions animées. Nous expliquerons comment créer sept interactions utiles pour vos prototypes.

Pourquoi devriez-vous prototyper de petites interactions ?

Des mouvements fluides, des changements d'état et des transitions subtiles aident un utilisateur à comprendre comment utiliser votre interface en lui donnant des commentaires sur certaines actions. Souvent, ces transitions font écho à des analogues du monde réel (tels que le glissement d'une commande de commutateur) ou utilisent des modèles d'interaction de périphérique courants (tels que toucher pour étendre). Dans ce didacticiel, nous nous concentrerons sur les interactions qui ajoutent une touche finale à l'interface pour guider la compréhension et susciter le plaisir de l'utilisateur.

Jetez un œil aux exemples ci-dessous. Les designers du monde entier créent ces micro-interactions dans divers produits.

Les 7 prototypes

Dans ce tutoriel, je vais vous donner un aperçu de chaque microinteraction et quelques extraits de code. Nous utiliserons plusieurs techniques différentes, vous pourrez donc choisir celle qui correspond le mieux à votre produit. Il n'y a pas de "bonne" façon de créer quoi que ce soit dans Framer Studio - comme je l'ai mentionné dans mon article précédent, Framer vous donne beaucoup de liberté pour créer comme vous le souhaitez.

Avez-vous déjà vu des interactions comme celles-ci ? Bien sûr, vous avez! Vous les voyez tous les jours sur votre smartphone. Il est temps de créer le vôtre.

1. Bouton d'action

Le bouton d'action représente souvent l'action principale de l'écran actuel. Parfois, il contient plusieurs actions à l'intérieur. Nous allons créer une interaction pour le deuxième cas. Téléchargez le prototype fonctionnel ici : https://framer.cloud/ShBnH

Étape 1 : Créer trois boutons en forme de cercle

Pour commencer, créez un bouton principal en forme de cercle avec une icône à l'intérieur et deux boutons plus petits placés sous le bouton principal. N'oubliez pas de marquer tous ces calques comme interactifs en mode conception (avec l'indicateur cible).

Étape 2 : Concevez deux états pour toutes les couches

Créez deux états différents pour les calques. Utilisez le code ci-dessous pour déplacer les petits boutons au-dessus du bouton principal et pour faire pivoter l'icône de 45 ° :

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Étape 3 : Ajouter un événement

Pour rendre ce prototype animé, nous devons ajouter un événement. Après avoir appuyé sur le bouton d'action, modifiez les états de tous les calques :

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Étape 4 : Animation printanière

À ce stade, l'animation semble très mécanique. Pour ajouter une touche humaine, nous ajouterons une animation printanière pour tous les calques :

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Le bouton d'action est prêt à fonctionner !

2. Commutateurs interactifs

Les étapes ci-dessous vous permettront de créer votre propre interaction de commutateur. Téléchargez le prototype fonctionnel ici : https://framer.cloud/ieypV

Étape 1 : Concevoir un terrain de jeu pour interrupteurs

Vous n'aurez besoin que de deux choses : le commutateur lui-même, qui contient au moins deux calques (arrière-plan et point), et quelques calques à animer après avoir utilisé le commutateur.

Étape 2 : Créer des états

Vous souvenez-vous du premier article comment concevoir des états directement dans Framer Studio ? Concevez vos états comme vous le souhaitez ou utilisez mes paramètres :

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Étape 3 : Ajouter un événement

Pour que le prototype fonctionne, nous devons ajouter un événement au commutateur. Après avoir appuyé sur le commutateur, nous allons changer l'état de tous les calques :

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Étape 4 : Ajustez le timing

Pour rendre tout plus naturel, ajustez le temps et le délai de tous les états :

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Maintenant, notre prototype est terminé !

3. Action de balayage de l'élément de la liste

Il s'agit d'une interaction typique pour supprimer, archiver ou enregistrer des éléments d'une liste. Balayez vers la gauche ou la droite et un élément sera effacé. Téléchargez le prototype ici : https://framer.cloud/rzMWP

Étape 1 : Créer un prototype en mode Conception

Vous pouvez utiliser votre propre design, si vous le souhaitez. Il suffit de garder la même structure des calques. Comme vous pouvez le voir dans l'image ci-dessus, tous les éléments de la liste ont un bouton "annuler" sous eux.

Étape 2 : Rendre les éléments déplaçables

Pour faire simple, nous allons créer une interaction uniquement pour le premier élément de la liste. Tout d'abord, rendez l'élément de liste déplaçable : item.draggable = true .

Verrouillez ensuite l'axe vertical : item.draggable.vertical = false .

Paramétrez les contraintes de la zone déplaçable : item.draggable.constraints

Et enfin, définissez la taille sur la taille de l'élément : size: item .

Voici à quoi ressemble tout le code :

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Vous pouvez maintenant balayer vers la gauche et vers la droite, et l'élément reviendra toujours à sa position d'origine.

Étape 3 : Créer un état

Ensuite, créez l'état de l'élément de liste lorsqu'il est supprimé. Je l'ai simplement déplacé en dehors de l'écran en utilisant l'axe des x.

 item.states.a = x: -360

Étape 4 : Modifier l'état après le balayage

Enfin, nous devons créer un déclencheur pour démarrer l'interaction. Lorsque nous faisons glisser l'élément vers la gauche de l'écran, il doit être supprimé. Le code ressemblera à ceci :

 item.onMove -> if item.x < -70 item.stateCycle("a")

Dans ce cas, nous utilisons une instruction "if". Le code ci-dessus dit essentiellement, lorsque nous déplaçons le calque d'élément de plus de 70 pixels, puis changeons l'état de l'élément en état 'a.' Vous pouvez en savoir plus sur les instructions if dans la documentation de Framer Studio : https://framer.com/getstarted/programming/#conditional

Étape 5 : Annuler l'action après avoir appuyé sur

Nous avons presque terminé cette interaction. Il ne reste plus qu'à annuler cette action :

 item_bg.onTap -> item.stateCycle("default")

Vous devriez être familiarisé avec ce code du didacticiel précédent.

Étape 6 (facultative) : Ajuster la synchronisation de l'animation

Si vous le souhaitez, vous pouvez ajuster le timing de l'animation :

 item.animationOptions = time: 0.75 curve: Spring

4. Chargeur de boutons

C'est une interaction très utile pour les actions qui nécessitent des temps de chargement ou d'attente pour l'utilisateur. Lorsque nous créons cette interaction, vous apprendrez à gérer de nombreuses animations qui se produisent une par une. Téléchargez le prototype ici : https://framer.cloud/FxmHN

Étape 1 : Créer un prototype en mode Conception

Créez un bouton simple avec quatre sous-couches : une barre de progression et trois icônes pour différents états. J'ai conçu mon bouton avec une icône de téléchargement visible, une barre de progression en bas d'une largeur de 0 et deux autres icônes masquées.

Étape 2 : Ajouter un événement

Tout ce prototype peut être réalisé sans écrire une seule ligne de code, simplement en utilisant les fonctionnalités d'autocodage de Framer.

Tout d'abord, ajoutez un événement. Nous déclencherons toute l'interaction en appuyant sur le calque du bouton :

Voici le code que Framer a écrit pour vous :

 button.onTap (event, layer) ->

Étape 3 : concevoir des animations

Nous utiliserons les fonctionnalités d'autocodage de Framer pour concevoir toutes les animations :

J'ai conçu quatre animations avec un timing différent :

• La première animation modifie la largeur de la barre de progression.
• La seconde cache l'icône de téléchargement avec opacité.
• Le troisième tourne et affiche l'icône du chargeur.
• Le dernier affiche et met à l'échelle l'icône de contrôle.

Voici le code que Framer a écrit pour chacune de ces animations :

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Étape 4 : Réinitialiser l'animation de chargement

Comme vous l'avez peut-être remarqué, nous n'avons pas masqué l'icône du chargeur une fois l'animation terminée. Pour terminer ce prototype, déclenchez une autre animation à l'aide de cet événement : load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Tirez pour rafraîchir

Presque tous les produits contenant une liste utilisent ce type d'interaction. L'utilisateur déroule toute la liste pour la rafraîchir. C'est très facile à créer. Téléchargez le prototype ici : https://framer.cloud/DgMDw

Étape 1 : Créez une liste simple avec une icône d'actualisation

Nous pouvons passer directement en mode conception. Nous avons besoin de deux choses : une liste et une icône d'actualisation. La chose cruciale ici est de masquer l'icône de rafraîchissement avec opacité et de la mettre sur notre liste :

Étape 2 : créer un composant de défilement

Nous voulons rendre notre liste déroulante. Pour ce faire, utilisez un composant de défilement et ajoutez-y une couche de liste :

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Étape 3 : Rendre l'icône d'actualisation visible

Créez un état simple pour l'icône :

 icon.states.a = opacity: 1

Étape 4 : Ajouter un événement après l'avoir retiré

Notre liste est déroulante en ce moment. Cela signifie que lorsque nous défilons vers le haut ou vers le bas, tout le contenu du défilement se déplace sur l'axe 'y'. Avec cette connaissance, nous pouvons créer un événement :

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Encore une fois, nous utilisons une instruction "if". Si la liste est tirée vers le bas (déplacement sur l'axe y) de plus de 180 pixels, nous déclencherons une action. Dans ce cas, nous allons animer deux calques : la liste et l'icône de rafraîchissement.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Nous utilisons « animer » pour déplacer la liste vers le bas de 210 pixels et faire pivoter l'icône d'actualisation à 360°.

Étape 5 : Réinitialiser tous les états

Le prototype fonctionne presque, mais nous devons réinitialiser tous les calques après l'animation de rafraîchissement. Pour ce faire, nous utiliserons un événement après la fin de l'animation :

 icon.onAnimationEnd ->

Nous animons la rotation de l'icône d'actualisation vers sa position d'origine, et en utilisant le cycle d'état, nous réinitialisons l'état d'arrière-plan de la liste et de l'icône :

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

C'est ça!

6. Glisser l'interaction

Avez-vous déjà remarqué que lorsque vous faites glisser un élément dans une application, il se passe toujours quelque chose avec l'élément lui-même ? Parfois, l'élément rétrécit, peut-être que d'autres éléments sont flous ou que l'opacité change. Apprenons à créer ce type d'interaction. Téléchargez le prototype fonctionnel ici : https://framer.cloud/YstiW

Étape 1 : Concevoir une grille simple avec des tuiles

Créez une grille de tuiles et assurez-vous qu'elles se trouvent à l'intérieur de l'élément parent.

Étape 2 : Utilisez la boucle "for" pour cibler toutes les tuiles

" for loop" peut sembler effrayant, mais c'est vraiment simple. Si vous n'êtes pas familier avec les boucles for , vous pouvez d'abord lire un peu de contexte : https://framer.com/getstarted/programming/#loops-and-arrays

Nous allons utiliser la boucle for pour cibler toutes les tuiles à l'intérieur de notre grille :

 for item in grid.subLayers

Avec cette simple ligne de code, vous avez ciblé toutes les couches à l'intérieur de la couche de grille.

Étape 3 : Rendre les tuiles déplaçables

Rendez chaque élément à l'intérieur de la grille déplaçable :

 for item in grid.subLayers item.draggable = true

Étape 4 : Concevoir un état de glissement

Tous les éléments doivent avoir un état lorsqu'ils sont déplacés. Vous devez commencer par le code, mais plus tard, vous pourrez modifier cet état dans l'éditeur de couches :

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Étape 5 : Faites glisser des événements

Nous devons créer des événements pour déclencher différents états pendant que l'élément est déplacé. Le premier événement déclenchera une action pendant que nous commençons à faire glisser :

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

J'ai utilisé this.bringToFront() pour m'assurer que l'élément est toujours au-dessus des autres calques.

Le deuxième déclencheur réinitialisera l'état de l'élément :

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

À ce stade, nous avons un prototype fonctionnel.

Étape 6 (facultative) : Jouez avec le timing

L'interaction se produit toujours le long d'une chronologie. Il est bon d'ajuster la chronologie pour obtenir un effet parfait :

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Plusieurs boutons "J'aime" (avancé)

Dans ce prototype, nous utiliserons des techniques plus avancées pour vous montrer une manière différente de cibler les calques dans Framer Studio, ce qui créera des interactions plus réactives en moins de temps. Si vous n'êtes pas familier avec le codage de base, je vous encourage à lire d'abord cet article : https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Pour cette interaction, nous allons ignorer la partie conception et utiliser un prototype que j'ai créé spécifiquement pour cet article : https://framer.cloud/SZMCH

Étape 1 : créer des tableaux

Jetez un œil à la structure des calques dans Framer Studio :

Nous avons un "bouton" à l'intérieur d'une "ligne" dans le groupe "liste". Nous allons créer une interaction sur les couches de boutons, nous devons donc les cibler. Mais d'abord, nous devons trouver toutes les couches de lignes et les mettre dans un tableau :

 rows = list.children buttons = []

J'ai également créé un tableau vide pour tous les calques « bouton » : buttons = [] .

Étape 2 : Ajouter une sous-couche au tableau

Commençons par la "boucle for":

 for i in rows buttons.push(i.children[0])

Pour ajouter des calques dans le tableau, nous utiliserons : buttons.push() . Cela signifie que nous plaçons la première couche de chaque groupe de "lignes" dans un tableau.

Étape 3 : Créer un état et un événement

Nous allons maintenant créer un état pour nos boutons "J'aime" et leur ajouter un événement en appuyant sur :

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Vous pouvez utiliser cette technique pour recréer tous les prototypes précédents et les rendre plus complexes.

Remarque finale

Lorsque vous créez des micro-interactions, vous vous concentrez sur les moindres détails. Vous pouvez créer des animations déclenchées par n'importe quel type d'action et les rendre absolument parfaites. Gardez à l'esprit qu'il existe des centaines de façons de créer le même prototype, et vous devez utiliser la méthode qui correspond à vos compétences et aux besoins de vos conceptions de produits.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques