faire la différence entre les outils d’interaction : Checkbox / Toggle / Button / Hover / Dropdown…

Checkbox > Les cases à cocher seront d’abord utilisées lorsqu’une action explicite est requise pour appliquer des paramètres. C’est par exemple le cas lorsque l’utilisateur doit donner son accord pour recevoir ou non une newsletter lors de son inscription.

Toggle switch > Il prend la forme d’un interrupteur, et vise à indiquer si une fonctionnalité est activée ou non. Contrairement aux cases à cocher, les toggle switch ne sont jamais accompagnés d’un bouton.

Button > Les boutons déclenchent une action, à la différence des liens qui dirigent l’utilisateur vers un nouvel emplacement.

Hover > Il permet de marquer les éléments clés d’une page web et constitue un moyen efficace d’améliorer l’expérience utilisateur.

Dropdown > C’est une liste déroulante de sélection qui permet aux utilisateurs de choisir parmi une liste d’options en cliquant ou en appuyant sur la flèche déroulante et en sélectionnant l’option souhaitée.

atomic design

L’Atomic Design est une technique de conception créée par Brad Frost en 2013. Cette méthode permet à travers de composants plus simples : atomes, molécules, organismes, templates et pages de créer des Design Systems.

Inspirée de la chimie, l’Atomic Design est une approche de conception permettant de réduire un site à ses plus petits composants afin de créer des Design Systems et d’optimiser la création d’interfaces responsives et fonctionnelles. Ces composants sont réutilisables, ils peuvent se regrouper afin de constituer des modules de plus grande taille. Ces modules, peuvent à leurs tours s’assembler pour constituer l’ossature d’une page puis d’un site. Il s’agit ainsi d’une démarche itérative et non linéaire.

source > voir la recherche intégrale de Brad Frost en ligne

préparer son projet avant de prototyper

organiser les éléments graphiques de son projet (page Design)

exo 1 > rappel sur les fondamentaux

les bases de Figma

exo2 > button / hover / overlay

1. principe général

1. Travailler sur la page “Composants” pour regrouper vos composants et utiliser le panneau “Assets” lorsque vous devez les positionner sur le projet.

2. Sélectionner votre objet (veillez à l’alignement centré du contenu pour faciliter sa composition) et créer un composant (cmd + alt + K). Renommer l’instance pour l’identifier facilement.

3. Ajouter un variant (en cliquant dans le panneau Design “Button exo 1”) et nommer la propriété “Hover”.

4. Sélectionner l’ensemble du composant et renommer les propriétés de chaque valeur (par exemple : Primaire / State (pour l’état de départ “Default” / Hover).

5. Modifier l’apparence du variant selon votre design visuel (atomic).

6. Ajouter une autre variante en cliquant sur le + pour créer un état “actif” (lorsque le bouton est appuyé), modifier son apparence (n’hésitez pas à utiliser des styles) et renommer sa propriété par “Active”.

7. Sur la page Projet, placer le bouton sur la maquette, utiliser le panneau “Assets” pour retrouver votre bouton et changer le texte.

8. Dupliquer la frame et changer l’état d’affichage du bouton par “Active”.

9. Dans Prototype, sélectionner le bouton de la 1re frame puis appliquer deux interactions au bouton de la 1re frame :
a. Trigger > While hovering – Action > Change to > Hover
b. ajouter une autre interaction (bouton +) Trigger > On click > Action > Navigate to > Destination (choisir la frame où le bouton “Active” apparaît)

2. boutons animés

Slide down effect

1. Créer un composant à partir de l’objet graphique sélectionné et le renommer.

2. Sélectionner l’objet, tracer un rectangle de la taille globale du bouton avec une couleur de fond et ignorer l’auto layout (panneau Position).

3. Placer ce rectangle au-dessus du texte, aligner selon le côté haut et indiquer une hauteur de 0 au rectangle.

4. Créer une variante et renommer les propriétés.

5. Sélectionner le rectangle de l’état Hover et indiquer une hauteur (égale à celle du bouton). Modifier la couleur du texte si besoin.

6. Dans Prototype, créer un Hover entre les deux éléments du composant (State vers Hover) :
Trigger > While hovering – Action > Change to > Hover – Animation > Smart animate – Duration > 350 ms
Attention, Figma compte en ms (350ms correspond environ à 0,35s) !

3D drop shadow effect

1. Créer un composant à partir de l’objet graphique sélectionné et le renommer.

2. Tracer un rectangle avec les mêmes attributs que le modèle du bouton, sélectionner le composant du bouton et le rectangle, et créer un composant.

3. Renommer ce nouveau composant par exemple “Button 3D shadow 2”.

4. Replacer le rectangle en dessous du composant Texte et réglez sa position (x = 5 – y = 5).

5. Créer une variante et renommer les propriétés.

6. Sélectionner la variante et particulièrement le bouton Texte puis réglez sa position (x = 5 – y = 5).

7. Dans Prototype, créer un hover entre les deux éléments du composant (State vers Hover) :
Trigger > While hovering – Action > Change to > Hover – Animation > Smart animate – Duration > 350 ms

Hover + image

1. Importer le bouton qui servira à ouvrir une image (BT blanc) et celui qui permettra de fermer l’image (BT noir).

2. Placer chaque bouton sur une frame de taille équivalente à la taille du bouton (dans notre exemple W=105 et H=38), nommer chaque frame : BT open (le blanc) et BT closed (le noir).

3. Convertir chaque bouton en composant.

4. Agrandir la frame du composant BT closed (le noir) et ajouter une image.

5. Appliquer un auto layout aux objets pour organiser les éléments (NB, l’image doit aussi utiliser un auto layout > shift + A).

6. Sélectionner les deux composants BT open + BT closed et cliquer sur Combine as variants. Renommer le variant (BT open/closed) et sa propriété BT hover.

7. Passer en mode Prototype, sélectionner le BT open et appliquer :
Trigger > Mouse enter, Destination > BT closed
puis sélectionner BT closed et appliquer Trigger > Mouse leave

8. Placer le composant BT open sur la page Projet pour observer l’interaction.

Pour placer plusieurs boutons de ce type, vous devez placer le composant à partir du panneau Assets et non pas dupliquer le composant sur la page.

3. overlay

1. Tracer une frame en dehors de l’écran visible et placer le composant d’une image (au préalable convertir l’image en composant).

2. Dupliquer la frame et changer l’apparence de l’image en utilisant la fonction Swap instance.

3. Placer sur la frame de votre maquette, 4 instances d’un composant “bouton” de votre choix (ils pourraient être tous différents !), l’état State est visible uniquement et un effet de hovering existe déjà. Vous pouvez modifier le contenu du texte de ce composant.

4. Passer en mode Prototype, sélectionner un composant puis dans le panneau Interactions, cliquer sur le + pour ajouter une interaction :
a. Trigger > On click, Action > Open overlay, Overlay > choisir la frame à cibler, Position > Manual (utiliser des repères pour placer l’image toujours au même endroit)
b. Sélectionner “Close when clicking outside”
c. Animation > Dissolve

5. Répéter l’opération pour les autres composants en ciblant chaque frame à faire apparaître.

exo 3 > dropdown / checkbox / slider

Dropdown

1. Dans la page Design, dessiner les différentes étapes d’un menu Dropdown : bouton à déployer (ouvert et fermé), liste des choix et leur effet de hover.

2. Sur la page Composant, créer l’effet de hover sur la liste (1 bloc clair et 1 bloc + foncé).

Sélectionner les deux objets et choisir Create component set et appliquer While hovering entre les deux états. Faire de même pour les autres listes (dans notre exemple : polygone, cube et étoile).
N’oubliez pas de renommer les propriétés de vos composants !

3. Déposer chaque composant précédemment créé, les sélectionner et appliquer un Auto Layout. Régler les espaces Gap entre les composants. Renommer la frame par Dropdown.

4. Créer un composant pour la version Active de la liste choisie (modèle avec un contour orange).

5. Placer le composant Active et le groupe des listes sur une même frame, puis créer un composant.

6. Placer les composants dans l’ordre pour organiser les différentes étapes de la liste : BT choisir + BT Active avec sa liste déroulante + Nom de la liste choisie affichée.
Dupliquer le composant de la liste Choisir et modifier les noms (le choix de l’utilisateur restera ainsi visible).

7. Sélectionner tous les composants de la liste et choisir Create component set. Renommer le composant Liste dropdown ok

8. Passer en mode Prototype pour créer les interactions :
>>> l’icône ouvre le bouton Active = On click > change to
>>> la sélection Étoile (liste etoile hover) affiche le nom de sa liste (button choisir ouvert) = On click > change to
Faire de même pour les autres sélections afin que leur liste s’affiche à chaque sélection.

>>> Régler le retour en sélectionnant l’icône de la flèche de chaque nom de liste = Trigger On click > Change to > Liste multi choix

9. Sur la page Projet, placer la liste et le bouton Continuez sur la même frame. Pour observer le déplacement du bouton lors du déploiement des listes, vous devez appliquer un Auto Layout à cette frame.

Checkbox

1. Dans la page Design, dessiner les différentes étapes de sélection de votre checkbox.

2. Sur la page Composant, copier/coller la version OFF (false non sélectionnée) et créer un composant.

3. Ajouter un variant au composant et régler les propriétés : OFF pour la checkbox non sélectionnée et ON pour celle sélectionnée. Modifier l’apparence de l’état ON (case cochée).
Attention le groupe de chaque checkbox doit porter le même nom entre l’état ON et OFF.

4. Dans Prototype, choisir l’état OFF (false) et pointer vers l’état ON (true) > Trigger > On click, Action > Change to, Checkbox active.
Et inversement de l’état ON vers l’état OFF > Trigger > On click, Action > Change to, Checkbox desactive.

5. Passer en mode Design, agrandir la zone du composant pour dupliquer le composant Checkbox OFF et appliquer un effet de hover. Figma vous indique que la valeur n’est pas correcte, à modifier par la propriété Hover.

6. Dans Prototype, appliquer While hovering entre les deux composants Checkbox=OFF et Checkbox=hover. Tester si besoin le résultat en plaçant le composant Checkbox etoile sur la page Projet.

7. Sur la page Composant, dupliquer le composant Checkbox etoile, modifier les textes et remplacer les images (Polygone et Cube).

8. Placer les 3 composants Checkbox etoile, polygone et cube sur la page Composants. Sélectionner les 3 et appliquer un Auto Layout (une nouvelle frame a été créée). Renommer Liste checkbox.

9. Dupliquer un texte deux fois pour écrire Tout sélectionner et Tout désélectionner. Ajouter un Auto Layout aux deux textes et Resizing W= Fill container. Ajuster Gap et Padding pour centrer les deux textes en sélectionnant la frame.

10. Sélectionner la frame Liste checkbox et convertir en composant. Renommer par Dropdown contents.
Ajouter un variant, sur le premier indiquer une propriété “Désélectionner” et sur le 2e la propriété “Sélectionner”.
Pour les états de la liste en mode Sélectionner, modifier la propriété OFF par ON. La case cochée apparaît.

11.Dans Prototype, sélectionner le texte “Tout sélectionner” (1er état) et pointer le 2e état “Sélectionner”. Et même chose pour le texte “Tout désélectionner” vers l’état premier “Désélectionner”.
Ne pas oublier de cocher l’option “Reset component state” pour réinitialiser l’interaction !

PB certaines manipulations ne permettent plus d’afficher toute la sélection ou de désélectionner toutes les cases. Dupliquer chaque variant et renommer le variant dupliqué “After tout sélectionner” et “After tout désélectionner”.

12. Dans Prototype, sélectionner “After tout désélectionner” et pointer vers “Désélectionner”. Choisir Trigger > After delay, Delay > 50ms.

Puis sélectionner “After tout sélectionner” et pointer vers “Sélectionner”. Choisir Trigger > After delay, Delay > 50ms.

13. Modifier le chemin de l’interaction pour faciliter la désélection des cases :

TXT Tout sélectionner (du composant Désélectionner) vers “After tout sélectionner”

TXT Tout sélectionner (du composant After tout sélectionner) vers “After tout désélectionner”

TXT Tout sélectionner (du composant Sélectionner) vers “After tout désélectionner”

TXT Tout sélectionner (du composant Sélectionner) vers “After tout sélectionner”

TXT Tout désélectionner (du composant Désélectionner) vers “After tout désélectionner”

14. Placer les deux composants sur la page Projet, appliquer un overlay à partir du composant Checkbox choisir vers le composant Dropdown contents. Trigger > On tap, Action > Open overlay, Overlay > Dropdown contents, Position > Manual, et cocher “Close when clicking outside”.

BONUS

Interactive Sidebar in Figma: Expand/Collapse on Hover

flows : flux et point de départ

Il est important de marquer la page d’accueil de la maquette afin que le scénario de navigation se déroule toujours à partir de cette page.

Sélectionnez la frame de votre page d’accueil, puis ajoutez “Flow starting point” . Une description peut être ajoutée, et s’avère nécessaire si vous placez plusieurs flows.

Slider interactif

1. Dans la page Composants, placer l’image sur une frame de taille identique et nommer la frame IMG + nom de l’image (dans notre exemple Rise).
> Sélectionner les deux éléments et appliquer un Auto Layout Grid Beta. Vérifier que la position de l’image soit parfaitement au centre (alignement).
> Dupliquer cette frame et convertir chaque élément en composant. Ils doivent porter le même nom !
> Sélectionner l’image du premier composant et réduire la taille de l’image uniquement. Utiliser les valeurs W et H en verrouillant les proportions.

2. Rechercher une icône avec le Plugin IconSvg.io en saisissant le mot “Volume”. Modifier son apparence.

3. Dans la page Projet, placer les composants à animer : IMG Rise et lcon volume.

4. Dessiner deux rectangles pour la barre du slider : le premier d’une longueur totale avec un fond clair et le second plus petit (niveau du volume bas) de couleur plus foncée.

5. Dupliquer la page, agrandir la barre du niveau (rouge), déplacer la position du composant Icon volume et changer l’instance du composant de l’image entre les deux frames du projet (clic droit > Swap instance).

6. Dans Prototype, sélectionner le composant “Icon volume” et appliquer Trigger > On drag, Animation > Smart animate, Curve > Ease in. Appliquer le même réglage à Icon volume de la 2e frame. Tester l’animation.

Ajouter des chiffres qui défilent lors du déplacement

1. Dans la page Projet, utiliser le Plugin IconSvg.io, saisir le mot “chat” pour trouver une forme de bulle de dialogue. Modifier son apparence et renommer la frame Icon chat.

2. Saisir les textes en ligne verticale et convertir ce bloc avec un clic droit Frame selection. Renommer la frame par Chiffres.

3. Sélectionner la frame Chiffres et cocher l’option Clip content. Intégrer cette frame à la frame Icon chat.

4. Sélectionner Icon chat et Icon volume et créer un groupe (cmd + G). Renommer par Slider.

5. Dupliquer cette frame Slider, placer un objet par page du projet et changer la position des objets (barre niveau rouge et affichage des chiffres).

6. Dans Prototype, sélectionner le premier bouton de volume (groupe Icons chat + volume) et pointer la 2e frame. Appliquer Trigger > On drag, Animation > Smart animate, Curve > Ease in. Même chose pour le bouton de retour.

exo 4 > carrousels

Carrousel et bouton de hover

1. Dans la page Composants, préparer les boutons Hover de votre interface.

2. Dans Projet, placer et composer vos images puis grouper l’ensemble. Renommer le groupe. Faire autant de groupe que de boutons.

3. Déplacer les groupes en dehors de la page Projet, et dupliquer la page Projet (1 page par bouton).

4. Désactiver la fonction Clip content si vous souhaitez observer les objets situés en dehors du plan de la page Projet.

5. Renommer les frames de projet pour situer les différentes actions : par exemple PROJET 1 – carrousel (hiver), PROJET 1 – carrousel (ete) et PROJET 1 – carrousel (automne).

6. Sélectionner le groupe correspondant à la frame affichée et positionner son contenu sur la page. Vous pouvez utiliser des repères ou vérifier la valeur Y de sa position pour harmoniser les présentations entre les frames.
Pour chaque frame, les groupes d’images sont présents mais n’occupent pas la même place.

7. Dans Prototype, appliquer une interaction allant d’un bouton vers la frame de destination.
Utiliser les réglages :
Trigger > Mouse enter, Action > Navigate to, Animation > Smart animate, Curve > Custom bezier, Duration > 1300ms (l’interpolation des formes sera plus douce en augmentant le nombre de ms).

Ne pas oublier de régler tous les boutons ainsi que les aller-retour entre les boutons. Excepté celui de la page sur laquelle on se trouve !

Une page d’introduction peut être créée. Dans ce cas l’interaction entre cette page d’intro et la première à afficher un contenu utilisera :
Trigger > After delay, Delay > 2000ms (suffisamment long pour lire les instructions à l’écran), Action > Navigate to, Animation > Smart animate, Curve > Custom bezier, Duration > 1300ms

8. Appliquer une rotation aux objets pour créer plus de mouvement. Figma est capable de créer l’interpolation entre deux positions pour un même objet. Attention leur nom doit être identique pour fonctionner !

Carrousel interactif

1. Dans la page Projet, placer toutes les images regroupées dans le carrousel, les aligner en ligne et les intégrer à une frame.

2. Redimensionner la frame autour de quelques images visibles et sélectionner Clip content pour voir le contenu du cadre uniquement.

3. Placer des icônes de flèche à gauche et à droite pour signaler l’interaction.

4. Placer une barre de navigation qui servira de repère selon le contenu affiché. Grouper les éléments de la barre de navigation ainsi que les images.

5. Sélectionner tous les éléments (barre + images + flèches) et créer un composant.

6. Ajouter autant de variants que d’objets à afficher (deux variants créés dans notre exemple).

7. Modifier l’affichage des images dans leur conteneur ainsi que la position et le contenu de la barre de navigation.

8. Sélectionner ce composant et ouvrir le panneau Prototype pour appliquer les interactions effectuées avec les flèches.
Sélectionner la première flèche de droite et pointer vers le variant 2 :
Trigger > On click, Action > Change to, Property > Variant 2, Animation > Smart animate, Curve > Ease out, Duration > 650ms
Paramétrer les interactions de toutes les flèches en respectant la logique du déroulement des images.

9. Réduire l’opacité de la première flèche de gauche pour signifier l’ordre d’utilisation aux visiteurs. De même pour la dernière flèche (droite) du carrousel.

10. Placer votre composant sur la page Projet.