Figma - prototypage

Figma

prototypage

Sommaire

1 - Introduction .......................................................................................................... p 3

2 - Créer des flux interactifs............................................................................. p 7

3 - Le mode prototypage ................................................................................. p 5

4 - Prévisualisation du prototype ............................................................... p 8

5 - Panneau latéral de droite ........................................................................ p 9

FIGMA

introduction

introduction

Lorsque vous travaillez sur Figma, l'interface par défaut est conçue pour faciliter la création et la modification de vos designs. L'onglet Design, situé en haut à droite de l'écran, est le point central de votre travail lorsque vous construisez vos interfaces, ajustez les styles, et organisez vos éléments. En passant de l'onglet Design à l'onglet Prototype, vous ouvrez un nouvel ensemble d'outils qui vous permet d'ajouter des interactions, des transitions, et des animations à vos designs. C'est à l'aide de ce mode que vous pourrez simuler le comportement réel de votre site ou application, en liant des frames entre elles, en configurant des actions utilisateur, et en prévisualisant les flux de navigation tels qu'ils apparaîtraient dans un environnement réel.

introduction

Sélectionner un Frame ou un Élément

Avant de passer en mode Prototypage, commencez par sélectionner un élément ou un frame sur votre espace de travail. Un frame peut être une page entière, une section spécifique de votre design, ou tout autre groupe d'éléments que vous souhaitez rendre interactif. Cliquez simplement sur le frame ou l'élément souhaité. Vous verrez alors ses contours apparaître, indiquant qu'il est bien sélectionné. Une fois votre frame ou votre élément sélectionné, basculez en mode "prototype" : l'interface de Figma changera légèrement. Les propriétés du panneau qui se situe à droite change : les options de design sont remplacées par des options spécifiques au prototypage.

introduction

Explorer l'interface

En mode Prototype, vous remarquerez plusieurs modifications par rapport au mode Design : Lorsque vous sélectionnez un élément ou un frame en mode Prototype, un petit point bleu apparaît sur le bord droit de l'élément sélectionné. Ce point est appelé connecteur. Le connecteur est l’outil principal pour créer des interactions entre vos éléments. Il vous permet de lier un élément ou un frame à un autre, ce qui est essentiel pour définir la navigation et le comportement interactif de votre prototype.

FIGMA

créer des flux interactifs

créer des flux interactifs

Qu'est-ce qu'un flux dans Figma ?

Créer plusieurs flux pour un seul prototype, sur une seule page permet de voir et de tester l'ensemble des interactions et des parcours que l'utilisateur pourrait emprunter dans votre application ou sur votre site Web. Un flux est un ensemble de cadres reliés entre eux, représentant un parcours utilisateur. Il peut montrer toutes les interactions possibles dans une application ou un site web, ou se concentrer sur une partie spécifique de l'expérience. En combinant plusieurs flux sur une même page, vous pouvez tester différentes sections ou fonctionnalités de votre projet, et obtenir une vue d'ensemble claire des différentes interactions possibles pour l'utilisateur. Ce processus permet de garantir que l'expérience utilisateur est fluide et intuitive, avant même la phase de développement.

créer des flux interactifs

Comment créer un flux dans Figma ?

Pour créer un flux dans Figma, il suffit de suivre quelques étapes pour donner vie à votre prototype, structurer votre flux et tester l'expérience utilisateur de manière fluide et efficace. Création des cadres (frames)Si vous ne l'avez pas fait en amont, commencez par créer les différents cadres qui représentent les écrans ou pages de votre prototype. Chaque cadre est un point d'étape dans le parcours utilisateur. Ajouter des connexionsEnsuite, reliez ces cadres en utilisant les interactions disponibles dans Figma. Par exemple, vous pouvez définir qu'un clic sur un bouton dans un cadre mène à un autre cadre. Cela permet de simuler la navigation de l'utilisateur. Tester le fluxUne fois les cadres et les connexions en place, vous pouvez tester votre flux en mode prototype. Cela vous permettra de visualiser le parcours utilisateur.

FIGMA

le mode prototypage

le mode prototypage

Interactions

Cliquez sur le "+" pour ajouter des options d'interactions : cela va vous permettre de choisir comment l'interaction doit être déclenchée.

Les options les plus courantes sont :

• On click : l'interaction se déclenche lorsqu'un utilisateur clique sur l'élément.

• On drag : l'interaction se déclenche lorsqu'un utilisateur fait glisser l'élément.
• While hovering : l'interaction se déclenche lorsqu'un utilisateur survole l'élément avec la souris.
• While pressing : l'interaction se déclenche lorsqu'un utilisateur clique et maintient la souris ou le pad, ou lorsque la pression est maintenue sur un appareil mobile.

En savoir plus sur les déclencheurs

le mode prototypage

Actions

Vous pourrez ensuite choisir l'action à entreprendre lorsque l'interaction est déclenchée. Les actions possibles pour "On click" par exemple, incluent :

• Navigate to : naviguer vers un autre frame ou page.
• Open Overlay : ouvre un cadre superposé, comme un pop-up ou un menu.
• Swap With : permet de remplacer un élément par un autre sans changer de frame.
• Back : cela permet de revenir à l'écran précédent, afin de simuler le bouton "Retour".

En savoir plus sur toutes les actions possibles

le mode prototypage

Transitions

Sélectionnez le type d’animation qui s’exécutera lors de la transition d’un frame à un autre. Quelques exemples courants incluent :

• Instant : la transition est immédiate, sans animation.
• Dissolve : une transition douce où l'un des écrans se fond dans l'autre.
• Smart Animate : Figma déplace intelligemment les éléments entre deux frames pour créer une animation fluide.

le mode prototypage

Animations

Définissez comment l’animation doit être modulée dans le temps :

• Ease In : l’animation démarre lentement, puis accélère.
• Ease Out : l’animation démarre rapidement, puis ralentit.
• Ease In and Out : l'animation démarre lentement, accélère au milieu, puis ralentit à la fin.
• Linear : L’animation se déroule à vitesse constante.

Durée : Spécifiez la durée de l'animation en millisecondes. Par exemple, une transition de 300 ms est rapide et fluide.

le mode prototypage

Scroll Behavior

Si votre frame contient plus de contenu que ce qui peut être affiché à l'écran, vous pouvez définir comment le contenu supplémentaire est accessible. Pour utiliser le défilement dans vos prototypes Figma, vous devez commencer par préparer les cadres pour le défilement : assurez-vous que le contenu s'étend au-delà des limites des dimensions du cadre.

En savoir +

le mode prototypage

Scroll Behavior

Position :

• Scroll with parent : les éléments qui défilent avec le parent se déplacent vers le haut et vers le bas du cadre lorsque vous faites défiler.
• Fixed : les éléments ne bougent pas, même lorsque vous faites défiler l'écran vers le haut ou vers le bas.
• Sticky : les éléments défilent d'abord, mais deviennent fixes une fois que leur bord supérieur atteint le haut de leur cadre parent.

Overflow :

• No scrolling : Aucun défilement n'est possible.
• "Horizontal" permet de faire défiler horizontalement le contenu qui dépasse la largeur du frame.
• "Vertical" permet de faire défiler verticalement le contenu qui dépasse la hauteur du frame.
• "Both directions" permett aux utilisateurs de naviguer dans n'importe quelle direction, comme lors de la visualisation d'une carte ou d'une image agrandie.

FIGMA

Prévisualisation du Prototype

Prévisualisation du Prototype

En haut à droite de votre écran, près des onglets Design et Prototype, vous verrez un bouton de lecture (Play) en forme de triangle. Ce bouton est utilisé pour lancer la prévisualisation de votre prototype. Cliquez sur ce bouton Play. Une nouvelle fenêtre de prévisualisation s'ouvrira automatiquement. Dans cette nouvelle fenêtre, vous pouvez interagir avec votre prototype exactement comme le ferait un utilisateur sur le site "final". Vous pouvez cliquer, faire défiler, et tester toutes les interactions et animations que vous avez configurées. Cela vous permet de voir en temps réel comment votre design fonctionne et de vérifier la fluidité du parcours utilisateur.

Prévisualisation du Prototype

Une fois que vous avez terminé d'explorer et de configurer vos interactions, vous pouvez revenir en mode "Design" en cliquant simplement sur l'onglet Design en haut à droite. En effet, si vous remarquez des éléments qui ne fonctionnent pas comme prévu lors de vos tests, ajustez les interactions ou animations, puis prévisualiser à nouveau pour vérifier les modifications. Le fait de basculer entre les modes vous permettra de continuer à ajuster vos éléments visuels ou de créer de nouveaux éléments tout en maintenant la possibilité de revenir à tout moment au mode Prototype pour affiner vos interactions. N'oubliez pas que la prévisualisation régulière de vos prototypes vous aide à identifier les ajustements nécessaires et à garantir une expérience fluide et intuitive pour l'utilisateur. En utilisant efficacement ces fonctionnalités, vous pouvez transformer vos designs en expériences utilisateurs dynamiques et intuitives.

Félicitations ! Vous avez maintenant parcouru les bases du prototypage dans Figma. À travers ce cours, vous avez appris à transformer vos conceptions statiques en expériences interactives en ajoutant des interactions, des transitions et des animations. Continuez à expérimenter, tester, et perfectionner vos conceptions !

En choisissant un fond foncé, nous visons à dissuader l'impression et à promouvoir une utilisation 100% numérique. Cette approche encourage une utilisation plus responsable et durable des technologies numériques, contribuant ainsi à la protection de notre environnement.

En savoir +

Sélectionner le Frame et choisir un Overflow "Vertical" !

Ci-dessous, le frame a été reduit en hauteur, pour que l'on ne voit que la partie qui s'affichera à l'écran lors de l'ouverture du site (sans scroller). Pour que le défilement soit possible, le contenu de votre cadre doit dépasser les limites du cadre lui-même.

Après avoir ajouté ce scroll, voici la prévisualisation du résultat :

Commencez par sélectionner le cadre que vous souhaitez mettre à jour. Ici, le wireframe "Desktop" : Cliquez sur la ligne du bas, et remonter-la au dessus du contenu existant.

Nous avons opté pour des supports de cours sur fond foncé pour plusieurs raisons, voici lesquelles et pourquoi : Écologie et économie de ressourcesRéduction de l'utilisation d'encre : Les écrans OLED, présents dans de nombreux smartphones, tablettes et ordinateurs portables modernes, éteignent les pixels pour afficher du noir. Un fond foncé consomme moins d'énergie et n'utilise pas d'encre numérique, contrairement aux écrans LCD qui nécessitent un rétroéclairage constant, quelle que soit la couleur affichée.Prévention de l'impression inutile : En choisissant un fond foncé, nous encourageons l'utilisation numérique de ces supports. L'impression de pages à fond foncé consomme non seulement beaucoup d'encre, mais elle est aussi coûteuse et moins respectueuse de l'environnement. En insistant sur le fait que ces supports ne sont pas destinés à être imprimés, nous contribuons à la préservation des ressources naturelles.Numérique Responsable Optimisation de la lecture écranLes fonds foncés peuvent être plus confortables pour les yeux lorsqu'ils sont lus sur des écrans, surtout dans des environnements peu éclairés. Cela réduit la fatigue oculaire et encourage une lecture prolongée sans inconfort. Réduction de la consommation énergétique : Pour les appareils équipés d'écrans OLED, les fonds foncés consomment moins d'énergie. Cela aide non seulement à prolonger la durée de vie de la batterie des appareils mobiles mais aussi à réduire l'empreinte énergétique globale de l'utilisation numérique. Conscience écologique : En choisissant de ne pas imprimer ces supports de cours, nous faisons un pas vers une utilisation plus responsable des ressources naturelles. Économie de papier et réduction des déchets : Moins d'impression signifie moins de papier utilisé, ce qui contribue directement à la réduction de la déforestation et à la conservation de la biodiversité. Cela signifie également moins de déchets à gérer.