Défilement du prototype et options de défilement

Définissez le fonctionnement du défilement et du panoramique dans vos prototypes pour reproduire les interactions de l'utilisateur, telles que :

• Faire défiler une longue page de contenu vers le haut et vers le bas
• Faire défiler vers la gauche et la droite pour afficher différents éléments dans un curseur
• Effectuer un panoramique ou un défilement dans n'importe quelle direction, comme sur une carte interactive
• Figer des objets tels que des barres de navigation et des menus à une position sur la page pendant le défilement
• Créer des « objets persistants » qui restent en haut de la frame lorsque vous les faites défiler

Pour utiliser le défilement dans vos prototypes Figma, vous devez :

1. Préparer les frames pour le défilement : assurez-vous que le contenu s'étend au-delà des limites des dimensions de la frame.
2. Appliquer le débordement du défilement à la frame : définissez si votre frame permet un défilement vertical, horizontal, les deux ou pas de défilement.
3. Appliquer la position de défilement aux objets dans la frame : définissez le comportement des objets dans votre frame lorsque vous les faites défiler. Ils peuvent défiler avec la frame parent, rester en position fixe ou rester ancrés en haut de la frame parent.

Une fois le défilement mis en place, vous pouvez également envisager de conserver ou de réinitialiser la position de défilement lorsque vous naviguez entre plusieurs frames.

Préparer les frames pour le défilement

Pour ajouter une option de défilement à une frame, celle-ci doit avoir un contenu qui s'étend au-delà de ses limites.

Considérez-la comme n'importe quelle page web : lorsque vous naviguez sur votre téléphone, vous ne pouvez voir que le contenu qui correspond aux dimensions de votre écran. Cependant, certains contenus « cachés » existent au-delà de ce que vous voyez sur votre écran et que vous ne pouvez voir qu'en faisant défiler la page.

Étendre le contenu au-delà des dimensions de la frame

Pour redimensionner une frame :

1. Sélectionnez la frame que vous souhaitez mettre à jour.
2. Ouvrez le panneau Design dans la barre latérale de droite.
3. Survolez le bord de la frame jusqu'à ce que le curseur apparaisse.
4. Faites défiler la boîte englobante pour redimensionner la frame.

Pour vous assurer que chaque objet se trouve toujours dans le cadre sélectionné, vérifiez la section Layers du panneau de navigation gauche. Les objets enfants sont imbriqués sous leur frame parent.

Masquer le contenu extérieur

Vous pouvez masquer tout contenu qui dépasse les limites d'une frame à l'aide de la fonction Masquer le contenu extérieur.

1. Sélectionnez la frame que vous souhaitez mettre à jour.
2. Ouvrez l'onglet Design dans le panneau des propriétés de droite.
3. Dans la section Mise en page, cochez la case en regard de Masquer le contenu extérieur.

Appliquer un dépassement de défilement aux frames

Le débordement de défilement définit les possibilités d'interaction dont disposent les utilisateurs avec le contenu s'étendant au-delà des dimensions d'une frame.

Vous pouvez uniquement appliquer une option de défilement aux frames. Cela s'applique aux frames directement sur le plan de travail (frames de premier niveau), ainsi qu'aux frames imbriquées dans d'autres frames ou calques.

Pour appliquer un dépassement de défilement à une frame :

1. Sélectionnez une frame.
2. Ouvrez l'onglet Prototype dans le panneau des propriétés de droite.
3. Dans la section Scroll behavior, sélectionnez la liste déroulante Overflow. Choisissez parmi :
   • Aucun défilement
   • Horizontal
   • Vertical
   • Dans les deux sens

Vertical

Le défilement vertical permet aux utilisateurs de glisser ou de faire défiler vers le haut et vers le bas. Utilisez cette option pour imiter le défilement d'un long site web ou d'une page de contenu au sein d'une application.

Horizontal

Le défilement horizontal permet aux utilisateurs de glisser ou de défiler à gauche et à droite, tout en conservant leur position verticale. Cette fonction permet de créer des curseurs pour le contenu, comme les produits, les galeries et les bibliothèques.

Aucun défilement

L'option Aucun défilement empêche les utilisateurs de faire défiler la page dans n'importe quelle direction. Le contenu qui dépasse les limites de la frame ne sera pas visible.

Dans les deux sens

Le défilement dans les deux directions (horizontale et verticale) permet aux utilisateurs de naviguer dans n'importe quelle direction, par exemple lors de l'affichage d'une carte ou d'une image agrandie.

Appliquer la position de défilement aux objets d'une frame

La position de défilement précise la manière dont les calques réagissent dans une frame lorsque les utilisateurs les font défiler. Vous ne pouvez appliquer qu'une seule position de défilement à chaque calque.

1. Sélectionnez un objet, un groupe ou un composant. L'objet doit se trouver sur une frame à laquelle est appliqué un débordement de défilement.
2. Ouvrez l'onglet Prototype dans le panneau des propriétés de droite.
3. Dans la section Scroll behavior, sélectionnez la liste déroulante Position. Choisissez parmi :
   • Défilement avec l'élément parent
   • Fixe
   • Collant

Défilement avec l'élément parent

Les objets qui défilent avec la frame parent se déplacent du haut vers le bas de la frame lorsque vous la faites défiler. Utilisez ce comportement pour imiter le comportement de défilement vers le haut et vers le bas de pages de contenu plus longues.

Fixe

Les objets fixes ne bougent pas, même lorsque vous faites défiler l'écran vers le haut ou vers le bas. Par exemple, cette option permet de fixer une barre d'état en haut de l'écran ou de fixer un menu en bas d'une frame.

Vous ne pouvez pas attribuer une position de défilement fixe aux objets d'une frame avec mise en page automatique, sauf si la position absolue est appliquée à l'objet.

Lorsque vous définissez un objet comme fixe, Figma le déplace au-dessus des autres calques de la frame et leur attribue l'étiquette Fixed dans la section Layers du panneau de navigation de gauche. Il n'est pas possible de positionner des objets défilants au-dessus de calques fixes.

Collant

Appliquez une position de défilement collante à tout objet dans une frame qui a un défilement vertical.

Les objets collants défilent au début, mais s'ancrent une fois que leur bord supérieur atteint le haut de la frame parent. (Si vous faites défiler à nouveau vers le haut, l'objet se décolle et se déplace vers le bas de la frame parent.)

Si l'objet collant est imbriqué dans un autre calque d'une frame, il reste dans les limites de son parent direct. Cela signifie que lorsque le calque parent direct est déplacé hors de la vue, l'objet collant continue à défiler avec son parent.

Consultez la section Layers dans le panneau de navigation de gauche pour voir comment les objets collants s'empilent lors du défilement. Tous les calques situés sous un objet collant défileront derrière lui, et tous les calques situés au-dessus d'un objet collant défileront devant lui. Pour modifier l'ordre dans lequel vos objets sont empilés lors du défilement collant, modifiez leur ordre dans le panneau Layers.

Conserver et réinitialiser la position de défilement

Lorsque votre prototype contient plusieurs pages ou écrans, vous pouvez choisir de conserver ou de réinitialiser la position de défilement d'une frame à l'autre.

• Conserver la position de défilement : conservez la position de défilement de l'utilisateur lorsqu'il passe d'une frame à l'autre
• Réinitialiser la position de défilement : réinitialisez la position de défilement de l'utilisateur lorsqu'il passe d'une frame à l'autre

En savoir plus sur la conservation ou la réinitialisation la position de défilement dans les prototypes →