Défilement du prototype et options de défilement
Avant de commencer
Qui peut utiliser cette fonctionnalité
Les utilisateurs de toutes les équipes ou tous les forfaits peuvent utiliser le défilement dans leurs prototypes.
Toute personne disposant d'un accès de type peut éditer pour un fichier peut créer et modifier des prototypes.
Les options de défilement définissent le fonctionnement du défilement dans les prototypes. Ces options comprennent le débordement de défilement et la position de défilement.
- 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'un cadre.
- La position de défilement spécifie la manière dont les calques réagissent sur le cadre lorsque les utilisateurs les font défiler.
Utilisez les options de défilement pour créer des prototypes capables de reproduire les expériences utilisateur interactives.
- Faire défiler une longue page de contenu vers le haut ou vers le bas
- Faire défiler de gauche à 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 pour qu'ils conservent la même position sur la page pendant le défilement
- Créer des « objets persistants » qui restent en haut du cadre lorsque vous les faites défiler
Lorsque nous créons des prototypes, nous voulons que nos interactions ressemblent autant que possible à la réalité. Pour certaines interactions, nous devons créer une illusion de dynamisme réel pour nos designs.
L'option Conserver la position de défilement vous permet de conserver l'emplacement du défilement lorsque vous passez d'un écran à l'autre. Ce fonctionnement s'applique à la profondeur de défilement d'un défilement vertical, ainsi qu'à la position de l'utilisateur sur un élément de défilement horizontal.
Pour en savoir plus sur la conservation de la position de défilement →
Débordement de défilement
Options de défilement
Vous pouvez uniquement appliquer les options de défilement aux cadres. Ce fonctionnement s'applique aux cadres qui se trouvent directement sur des canevas (cadres de niveau supérieur), ainsi qu'aux cadres imbriqués dans d'autres cadres ou calques.
Pour appliquer des options de défilement, le contenu du cadre doit dépasser ses limites. Si vous modifiez les limites du cadre pour que tout le contenu s'y insère, le défilement régulier s'applique.
Figma prend en charge 4 options de défilement distinctes : Aucun défilement, Vertical, Horizontal et Dans les deux sens.
L'option « Aucun défilement » empêche les utilisateurs de défiler vers le haut et vers le bas au sein d'un cadre. Lorsqu'elle est définie, le contenu qui s'étend au-delà des limites du cadre ne s'affiche pas.
Le défilement vertical permet aux utilisateurs de faire glisser ou de faire défiler vers le haut et vers le bas au sein d'un cadre. Utilisez cette option pour imiter le défilement vers le bas d'un long site Web ou d'une page de contenu dans une application.
Le défilement horizontal permet aux utilisateurs de faire glisser ou de faire défiler vers la gauche et vers la droite au sein d'un cadre, tout en conservant leur position verticale. Utilisez cette option pour créer des curseurs pour le contenu, comme des produits, des galeries et des bibliothèques.
Le défilement horizontal et vertical permet aux utilisateurs de naviguer dans n'importe quelle direction dans un cadre : gauche, droite, haut, ou bas. Utilisez cette option pour une prise en charge du défilement dans n'importe quelle direction, comme pour afficher une carte ou une image agrandie.
Appliquer des options de défilement
Pour appliquer des options de défilement à un cadre, des objets enfants doivent s'étendre au-delà de ses limites. Vous ne pouvez appliquer qu'une seule option de défilement à chaque cadre.
Ces instructions s'appliquent également aux composants. Sélectionnez l'Instance dans le canevas, cliquez sur Aller au composant principal dans la barre latérale de droite, puis ajustez les limites du Composant d'origine.
- Sélectionnez le cadre dans le canevas.
- Ouvrez le panneau Prototype dans la barre latérale située à droite.
- Dans la section Options de défilement, sélectionnez le menu déroulant Débordement. Vous avez le choix entre les options suivantes :
- Aucun défilement
- Horizontal
- Vertical
- Dans les deux sens
- Cliquez sur l'icône présente pour visualiser le prototype dans le mode présentation et voir les résultats.
Ajuster les limites d'un cadre
Si aucun contenu ne s'étend au-delà du cadre, Figma affiche un message d'erreur lorsque vous essayez d'appliquer des options de défilement. Pour appliquer des options de défilement, vous devez ajuster les limites du cadre.
- Sélectionnez le cadre que vous souhaitez mettre à jour.
- Ouvrez le Panneau de design dans la barre latérale située à droite.
- Passez le curseur sur les limites du cadre dans le canevas jusqu'à ce que le curseur apparaisse.
- Faites défiler la boîte englobante pour redimensionner le cadre.
- Si vous souhaitez masquer le contenu qui s'étend au-delà du cadre, cochez la case en regard de l'option Cacher le contenu extérieur.
- Mac : Commande ⌘
- Windows : Ctrl
Position de défilement
Vous pouvez appliquer l'option « Position de défilement » à n'importe quel calque au sein d'un cadre. Tous les objets d'un cadre peuvent se voir attribuer une position de défilement donnée.
Figma prend en charge trois types de positions de défilement : Défilement avec l'élément parent, Fixe et Collant.
Positions
Les objets qui défilent avec l'élément parent se déplacent vers le haut et vers le bas dans le cadre lors du défilement. Utilisez cette option pour imiter le comportement d'un défilement vers le haut ou vers le bas de pages de contenu plus longues.
Les objets fixes restent statiques, même pendant le défilement vers le haut et vers le bas. Cette option vous permet de verrouiller la position d'un objet, afin qu'il reste à sa place. Utilisez des calques fixes pour ancrer une barre d'état au sommet de l'appareil, ou pour ancrer un menu au bas d'un cadre.
Vous ne pouvez pas attribuer une position de défilement fixe à un objet d'un cadre avec disposition automatique.
Lorsque vous créez un objet fixe, Figma déplace les calques correspondants au-dessus des autres calques de votre design et les identifie comme Fixes dans votre panneau des calques. Il est impossible de placer des objets de défilement au-dessus des calques fixes.
Les objets persistants commencent comme un défilement dans le cadre parent, puis deviennent fixes lorsque le bord supérieur de l'objet atteint le sommet du cadre. (Si vous faites à nouveau défiler vers le haut, l'objet se décolle et se déplace vers le bas dans le cadre parent.)
Vous pouvez utiliser la position de défilement collant pour concevoir des menus de navigation ou des en-têtes en collision.
Les objets persistants s'appliquent uniquement au défilement vertical. Pour appliquer une position de défilement collant à un objet, l'option de défilement du cadre parent de l'objet doit être définie sur « Vertical ». Vous ne pouvez pas ancrer un objet au bas, à gauche ou à droite d'un cadre.
Remarque : Consultez le panneau des calques pour savoir comment les objets persistants s'empileront dans votre prototype. Les calques se trouvant sous des objets persistants défileront derrière eux, tandis que les calques se trouvant au-dessus des objets persistants défileront devant eux.
Appliquer une position de défilement à un calque
Les positions de défilement s'appliquent aux calques individuels d'un cadre. Vous pouvez appliquer une seule position de défilement à chaque objet.
- Sélectionnez l'objet, le groupe ou le composant dans le canevas.
- Ouvrez le panneau des prototypes dans la barre latérale de droite.
- Dans la section Options de défilement, sélectionnez le menu déroulant Position. Vous avez le choix entre les options suivantes :
- Défilement avec l'élément parent
- Fixe
- Collant
- Cliquez sur la présente icône pour afficher le prototype dans le mode présentation et consulter les résultats.
