Comment rendre un élément fixe sur Figma ?

Pourquoi fixer un élément dans Figma ?

Rendre un élément fixe vous permet de :

• Maintenir une navigation accessible à tout moment.
• Améliorer l'expérience utilisateur.
• Simuler des comportements réalistes d'applications et de sites web.

Étapes pour fixer un élément dans Figma

Étape 1 : Sélectionner l’élément à fixer

• Sélectionnez l'élément à fixer (barre de navigation, tab bar, etc.).
• L'élément peut être un composant ou un simple élément standard.

Étape 2 : Accéder aux réglages de Prototype

• Dans le panneau latéral droit, cliquez sur l'onglet « Prototype ».
• Cherchez l'option « Scroll behavior » puis choisissez « Fixed ».

Étape 3 : Vérifier avec la prévisualisation

• Cliquez sur « Play » pour ouvrir la prévisualisation.
• Sélectionnez le device de votre choix (par exemple iPhone 15 Pro) dans les réglages du prototype pour tester en conditions réelles.
• Scrollez pour vérifier que votre élément reste fixe.

Exemple pratique : barre de navigation fixe

Imaginons que vous créez une application similaire à Vinted. Vous souhaitez que la barre de navigation inférieure reste fixe lors du scroll :

• Sélectionnez la barre de navigation.
• Activez la position « Fixed » dans les options de « Scroll behavior ».
• Testez via la prévisualisation sur un device précis comme un iPhone 15 Pro.

Votre barre reste désormais fixe à l'écran, facilitant ainsi l'accès aux menus principaux.

Astuce complémentaire : Organisation des éléments fixes

Dans votre panneau de calques, les éléments fixés apparaissent sous une catégorie « Fixed », facilitant leur gestion et modification.

‍

Rendre des éléments fixes sur Figma est une technique simple et efficace pour améliorer l’interaction et la fluidité de vos prototypes. Adoptez cette pratique pour enrichir l'expérience utilisateur de vos designs.