L’overlay est un élément d’interface placé en superposition d’un bloc de contenu d’un site Web ou d’une application mobile, utilisé pour améliorer l’expérience utilisateur.
Il s’agit d’une couche visuelle qui apparaît au-dessus du contenu en cours de lecture pour collecter des informations, confirmer des actions, afficher du contenu supplémentaire, afficher des notifications.
Un overlay doivent être non intrusif, facilement refermé et ne pas bloquer l’accès au contenu principal, contrairement à la modale qui est une fenêtre contextuelle qui bloque l’interaction avec le reste de la page jusqu’à ce qu’une action spécifique soit effectuée.
Overlay en prototypage
Interaction de prototypage pour afficher un contenu temporaire au-dessus de l’interface courante.
Dans Figma, un Overlay est une transition de prototype qui permet de superposer un élément comme une fenêtre modale, un menu déroulant, une lightbox, un tooltip ou un panneau latéral au-dessus de l’écran actuel, sans quitter la page ni recharger le contexte. Le contenu d’origine reste visible en arrière-plan, souvent assombri ou flouté, afin de diriger l’attention de l’utilisateur vers l’élément superposé.
Fonctionnement technique dans Figma
- Dans l’onglet Prototype, sélectionnez une interaction (ex. clic sur un bouton).
- Choisissez “Overlay” comme type de navigation.
- Définissez :
- La position de l’overlay (Center, Top, Bottom, Left, Right),
- L’animation (Instant, Dissolve, Smart Animate, etc.),
- Le calque cible (un autre frame ou composant).
- L’overlay apparaît dans le même viewport, sans historique de navigation (contrairement à “Navigate to”).
Important : L’overlay ne crée pas de nouvelle page ; il est géré comme une couche temporaire au sein du même prototype.