Figma - Prototypage avancé
Les options de prototypage avec Figma permettent certaines fonctions avancées afin de rendre votre maquette encore plus interactive et dynamique.
Note : Cette quête fait suite à la quête Introduction aux prototypes et en reprend l'exercice de validation, il est nécessaire de l'avoir completé au préalable.
Source : dribbble.com
🤓 À la fin de cette quête, vous saurez
✅ Animer des éléments de façon fluide ✅ Régler les options de défilement ✅ Créer des fenêtres modales ✅ Optimiser le nombre d'interactions
L'animation
Les animations de prototype
Les animations vont permettre de définir les différentes transitions entre les éléments. Elles vont également régir le comportement d'actions telles que l'ouverture d'un menu, la navigation d'inter-pages ou l'apparition d'une galerie d'image par exemple.
Il est possible de choisir une animation depuis le panneau « Transitions » lors de la phase de prototypage.
Les animations disponibles sont les suivantes :
- Instant : Apparition immédiate
- Dissolve : Apparition progressive
- Move In / Move Out : Recouvrement latéral
- Push : Poussée latérale
- Slide In / Slide Out : Balayage latéral
- Smart Animate : Les éléments communs définissent la transition
Les paramètres vont permettre de définir la direction de l'animation, mais aussi la durée et l'accélération.
Source : figma.com
Définie par l'attribut ease l'accélération va permettre de contrôler la position dans le temps sous forme de fonction mathématique.
Détaillées dans le visuel ci-dessus, nous allons retrouver les propriétés ease suivantes :
- Linear
- Ease In
- Ease Out
- Ease In and Out
- Ease In Back
- Ease Out Back
- Ease In and Out Back
- Custom
À noter qu'il est possible de paramétrer manuellement les points d'inflexions de la courbe d'accélération depuis la propriété « Custom ».
Utilisation de la propriété Smart Animate
Source : figma.com
La propriété Smart Animate va créer une correspondance entre les éléments de départ et ceux d'arrivée.
Les possibilités sont nombreuses et Smart Animate va notamment permettre de créer des animations avancées telles que :
- Des séquences de chargement
- Des effets de défilement en parallaxe
- Des interactions
- Des sliders ou des interupteurs
- D'actualiser du contenu
L'échelle, la position, l'opacité, la rotation et le remplissage sont les différentes variables que cette propriété va permettre d'influencer.
Il est possible d'utiliser Smart Animate de façon complémentaire à une transition classique, il suffit de cocher « Smart animate matching layers » depuis le panneau d'animation. Ainsi, les éléments avec une correspondance utiliseront Smart Animate tandis que les autres seront régis par l'animation sélectionnée.
Source : figma.com
L'exemple ci-contre nous montre une transition de type Push entre chaque page. L'activation de « Smart animate matching layers » va permettre d'assurer la continuité de la barre de navigation entre les frames.
Le nommage des éléments à son importance, la propriété Smart Animate va associer les éléments de différentes frames ayant le même nom. Pour les dissocier, il est donc important de les renommer distinctement.
Le scroll
Scroll overflow
De la même façon qu'il est possible de contrôler les différentes actions d'un prototype, le scrolling est entièrement paramétrable. Lorsque le contenu d'une frame va dépasser de cette dernière, nous allons parler d'overflow.
Source : dribbble.com
Les 4 modes d'overflow utilisables dans Figma sont les suivants :
- No scrolling : Le défilement est figé
- Vertical : Le défilement est vertical
- Horizontal : Le défilement est horizontal
- Both directions : Le défilement est vertical et horizontal
Pour définir une de ces options, il suffit de sélectionner une frame dont au moins un élément sort du cadre et déninir le « Scroll behavior » depuis l'onglet « Prototype ».
La checkbox « Clip content » située dans la section « Frame » de l'onglet « Design » permets de masquer le contenu en excès. Il reste visionnable en mode prototype si l'overflow a été défini.
Scroll position
La position du scroll va définir le comportement d'un élément lorsque l'utilisateur défile sur la page. Il est possible d'en définir l'un des trois types possibles depuis la section « Scroll behaviour » du menu « Prototype » pour chaque élément d'une frame.
Source : figma.com
• Scroll with parent
La propriété « Scroll with parent » va rendre l'élément dépendant du scroll et ainsi le déplacer selon la position de la page.
• Fixed
L'élément sera figé sur la frame grâce à la propriété « Fixed » et ne sera ainsi pas dépendant du scroll. Cet attribut est notamment utile dans le cadre de la création d'un header ou d'un footer.
• Sticky
À l'instar de la propriété « Scroll with parent », la propriété « Sticky » va tout d'abord être dépendante du scroll ; lorsque l'élément va atteindre le haut de la frame, il va ensuite prendre les attributs de la propriété « Fixed ».
Il n'est pas possible de fixer un objet « Sticky » ) d'autres bords de l'image, ainsi cette propriété n'est compatible qu'avec un scroll vertical
Les fenêtres modales
Open Overlay
Également désignées boîtes de dialogue, les fenêtres modales sont générées via l'action overlay dans Figma. Ils vont ainsi se superposer à la frame sans qu'il n'y ait de changement de page.
Source : htmlburger.com
Lors de la création d'interaction entre deux frames il est possible de sélectionner « Open overlay » depuis les actions.
Il y a ensuite possibilité de personnaliser l'overlay en choisissant par exemple sa position par rapport à la frame de départ.
Source : figma.com
Les frames en overlay sont identifiables grâce à un icône dédié représentant deux rectangles superposés. Le clic sur ce pictogramme va permettre de modifier les attributs de l'overlay ou de le supprimer.
Swap Overlay
La fonction « Swap overlay » permet de passer d'un overlay à un autre. Cette fonction est utile lorsqu'une fenêtre modale en amène à une autre ou qu'elle contient plusieurs pages.
Lorsque une frame de destination a déjà une transition « Open overlay » d'attribuée, l'option « Swap overlay » est sélectionnable lors la création d'une transtion vers une autre frame.
Les sections
Les sections sont accessibles depuis le menu frame et vont permettre de mieux structurer le projet. En Prototypage, elles vont permette de simplifier le nombre d'interactions entre les éléments.
Ainsi, dans le cadre d'un ensemble distinct, les différentes frames vont être regroupées dans une section qui pourra être liée grâce à un nombre réduit d'interactions.
Cette fonction peut être utile dans le cadre de formulaires de connections ou de fenêtres contextuelles.
Source : uxdesign.cc
☝️ Résumé
Il existe de nombreuses fonctionnalités permettant d'améliorer et de valoriser le prototypage d'une maquette avec Figma. Utilisées à l'unison, elle vont permettre de rendre le prototype plus vrai que nature et proche du résultat final.
L'outil Smart Animate est un réglage performant qui va permettre de simlifier les transitions en les rendant plus naturelles et user friendly. En parallèle, les courbes d'animation vont quant à elle rendre les mouvements plus fluides.
Fonction essentielle à la navigation d'une page, le scroll est entiérement paramétrable, qu'il s'agisse d'une frame entière ou des éléments qui la compose.
Enfin les overlay vont offrir une couche d'interaction supplémentaire en offrant la possibilité de superposer une frame à une autre.
Source : dribbble.com