Un user flow dans Figma est une représentation visuelle des étapes qu’un utilisateur suit pour accomplir un objectif spécifique dans un produit (site web, application, etc.). Il illustre les interactions entre les différentes pages ou écrans, en montrant clairement :
- les points d’entrée (ex. : page d’accueil, notification, email),
- les décisions (ex. : s’inscrire vs se connecter),
- les actions (ex. : cliquer, remplir un formulaire),
- et les redirections vers les écrans suivants.
Dans Figma, un user flow typique peut inclure
- Écrans ou cadres (frames) représentant chaque page ou état (ex. : login, panier, profil).
- Flèches ou connecteurs indiquant la direction du parcours.
- Annotations expliquant les déclencheurs (ex. : “Clic sur ‘Mot de passe oublié’”).
- Variantes d’état (ex. : champ vide vs erreur de validation).
- Liens de prototype (si le flow est interactif) : les transitions sont configurées via l’onglet Prototype, en définissant :
- Le point de départ (un bouton, une icône…),
- La destination (une autre frame),
- Le type de déclencheur (onClick, onDrag, etc.),
- L’animation de transition (dissolve, slide, etc.).
Exemple simple
Page d’accueil → Clic sur “Se connecter” → Écran de login → Saisie réussie → Redirection vers le tableau de bord.
Distinction entre user flow et workflow
Le user flow décrit le chemin qu’un utilisateur prend pour accomplir un objectif spécifique au sein d’une interface ou d’un produit.
Objectif: s’assurer que le parcours est logique, efficace, et atteint l’objectif de l’utilisateur (ex: Inscription, Achat, Réinitialisation de mot de passe).
Portée: il est strictement axé sur l’expérience utilisateur et les interactions à travers l’interface utilisateur (UI).
Focus: Il est orienté vers l’utilisateur, ses actions, les écrans qu’il voit, et les décisions qu’il prend.
Représentation dans Figma: Une série d’écrans (frames) connectés par des flèches, souvent avec des points de décision, pour illustrer le parcours d’un utilisateur, par exemple, pour acheter un article.
| Caractéristique | Workflow (Flux de Travail) | User Flow (Flux Utilisateur) |
| Qui/Quoi? | Le système, les données, les équipes | L’utilisateur final (sa perspective) |
| Objectif Principal | Accomplir une tâche ou un processus interne | Accomplir un objectif utilisateur |
| Dans Figma (Visualisation) | Peut être un diagramme de processus ou un simple organigramme pour l’équipe. | Représenté par les écrans de l’interface et les liens de navigation. |