Figma - Les sections pour le prototypage
👉 Introduction
Hello :var[user.firstname], utilises-tu les sections dans figma ?
Les sections nous permettent de structurer nos pages et d'organiser nos frames et nos contenus. Cela nous facilite la navigation et guide les collaborateurs dans nos fichiers.
Mais elles ont aussi une autre utilité. C’est ce que cette quête vous propose de découvrir
🤓 A la fin de cette quête, tu comprendras :
- ✅ Qu'est ce qu’une section dans figma ?
- ✅ Que permettent les sections ?
- ✅ Comment créer une section dans figma
- ✅ L'atout des sections pour le prototypage
Qu'est ce qu’une section dans figma ?
C’est un élément du plus haut niveau (top level) sur le canevas qui possède son propre type de calque. Ce type d'élément a été conçu principalement pour l'organisation et ne permet pas certaines fonctionnalités.
Une section :
- Peut contenir d'autres sections
- Peut contenir tout autre type de calque
- Supporte les options de remplissage (couleur)
- Supporte les options de contour (stroke)
- Supporte le partage via une URL
- Peut etre la cible d'une interaction
.
- Ne peut pas être contenu dans des cadres ou des groupes
- Ne supporte pas l’auto layout
- Ne supporte pas les effets
- Ne supporte pas les grilles
- Ne permet pas les déclencheurs pour initier une interaction
Que permettent les sections ?
Les sections nous permettent de :
- Regrouper et nommer des zones du canevas pour la collaboration ou l'idéation
- Organiser les fichiers pour faciliter la navigation
- Conserver la dernière frame visitée lorsque l’on navigue d’une section à une autre.
Comment créer une section dans figma
Dans le deuxième sous-menu de la tool bar, cliquez sur la deuxième icône.
Ou
utilisez le raccourci clavier ⇧ Shift S.
Puis cliquer glisser la zone du canevas où vous souhaitez créer la section
Ou
Sélectionnez les éléments que vous souhaitez incorporer dans la section, puis clic droit “Wrap in new section”
Utiliser les sections pour la collaboration (partage par URL)
Les sections peuvent par exemple être utilisées pour indiquer aux autres membres d'une équipe quels sont les éléments qui sont en statut validé. Il est possible de leur appliquer une couleur pour les mettre en évidence ou encore de partager un lien qui pointera directement sur la section où se trouvent les éléments validés pour utilisation.
- Sélectionner la section que vous souhaitez partager
- Cliquer sur le bouton Share situé en haut à droite dans la tool bar
- Sélectionner les options concernant les droits d'édition (can view)
- Cocher la case Link to current selection
- Cliquer sur Copy link
L'atout des sections pour le prototypage
L'Un des avantages majeur des sections est que lorsque l'on passe à l'étape de prototypage , elles permettent de conserver le contexte précédent lorsque l’on navigue d’une section à une autre.
Figma se souviendra de la dernière frame visualisée dans une section et lorsque l'utilisateur y reviendra, il affichera cette frame en premier.
Cela permet de conserver l'historique et de proposer une expérience plus proche du produit final.
Exemple
Voici un exemple où, sur une home page, un bloc met en avant une sélection de produits sous le thème : meilleures ventes. Ce bloc dirige vers des fiches produits sur lesquelles on peut naviguer à la façon d'un diaporama. Grace à l'utilisation des sections, lorsque l'utilisateur retourne à la home et revient ensuite à la sélection meilleures ventes, Figma le renvoie vers le dernier produit qu'il a visité afin qu'il puisse reprendre sa navigation là où il l'avait laissée.
Tester le PROTOTYPE
Voir le FICHIER Figma
☝️ Résumé
- Les sections nous permettent d'organiser nos fichiers.
- Elles permettent aussi de faciliter la collaboration en mettant en lumière des zones du canvas (couleur & nom), et en offrant la possibilité de partager un lien pointant directement vers une section.
- Pour le prototypage elle permette de conserver la dernière frame visitée lorsque l’on navigue d’une section à une autre.
💪 Challenge
En vous inspirant de l'exemple d'usage de sections au sein d'un prototype, réalisez un prototype basse fidélité (wireframe) de 3 écrans reprenant l'interface d'Instagram, pour les pages Home et Search. L'utilisateur devra pouvoir naviguer entre ces deux pages. La tab bar devra être présente sur l'ensemble des écrans, permettant ces actions. Selon l'action précédente de l'utilisateur dans la partie Explorer (Search), l'icône Search de la tab bar renverra soit à la vue galerie sous forme de grille, soit au dernier post visionné après avoir cliqué sur l'une des images de la galerie.
Exemple des deux écrans sur lesquels peut se trouver un utilisateur en tapant sur l'icône Search. Si l'utilisateur avait précédemment cliqué sur une image de la galerie pour la visionner, il reviendrait dessus. Dans le cas contraire, il serait ramené sur la Galerie (Explorer).
Partagez votre solution sous forme de lien accessible à tous.