Ajouter du scroll dans un écran
💡 Sujet
Dans Figma, le défilement (scrolling) ne s'active pas automatiquement. Il faut configurer le comportement de débordement (Overflow) dans les paramètres de prototypage pour permettre aux utilisateurs de faire défiler le contenu verticalement ou horizontalement.
⚙️ La méthode
1. Préparer le contenu
- Votre contenu (frames, images, texte) doit dépasser les limites de la frame parente.
- Assurez-vous que la frame parente a l'option "Clip content" activée (dans l'onglet Design) pour masquer ce qui dépasse.
2. Activer le scrolling
- Sélectionnez la frame parente.
- Allez dans l'onglet Prototype dans le panneau de droite.
- Cherchez la section "Scroll behavior".
- Changez le paramètre Overflow :
- Vertical : Pour un défilement de haut en bas (classique pour une page web ou mobile).
- Horizontal : Pour un carrousel par exemple.
- Both directions : Pour une carte ou un grand plan.
3. Fixer des éléments (Header/Footer)
Pour que certains éléments ne scrollent pas (comme une barre de navigation) :
- Sélectionnez l'objet à l'intérieur de la frame.
- Dans l'onglet Prototype, sous Scroll behavior, réglez Position sur Fixed (Stay in place).
⚠️ Erreurs communes
- Contenu trop petit : Si votre contenu ne dépasse pas de la frame, le scroll ne s'activera pas.
- Frame vs Groupe : Le scroll overflow ne peut être appliqué qu'à une Frame. Si vous avez un groupe, faites un clic droit et choisissez "Frame selection".
🧩 Résumé
- 📋 Onglet : Prototype > Scroll behavior.
- ↔️ Options : Vertical, Horizontal, Both directions.
- 📌 Éléments fixes : Utilisez Position: Fixed pour les menus.
- 💡 Astuce : Vérifiez toujours que votre frame parente est plus petite que le contenu qu'elle contient.