Créer et gérer des flux de prototypes

Avant de commencer

Qui peut utiliser cette fonctionnalité

S'applique à toutes les équipes ou tous les forfaits.

Toute personne disposant d'un accès peut éditer au fichier peut créer des flux de prototypes.

Lors de la création d'un prototype dans Figma, vous pouvez créer plusieurs flux pour tester les différentes parties d'un parcours utilisateur.

Un flux est une collection de cadres connectés qui constituent une expérience de prototype unique. Par exemple, vous pouvez créer un prototype pour une application de shopping qui inclut un flux pour la création de compte, un autre pour la consultation des articles et un autre pour le processus de paiement, le tout sur une seule page.

Créer un flux de prototypes

Points de départ des flux

Le point de départ d'un flux est l'endroit où le flux commence. Les points de départ des flux sont définis sur les cadres de niveau supérieur.

Lorsque vous ajoutez une connexion entre deux cadres qui n'ont encore aucune connexion, Figma créera un point de départ sur le cadre de niveau supérieur où la connexion a commencé. Les points de départ des flux apparaissent sur le plan de travail avec une icône d'aperçu bleue et le nom du flux.

Un cadre peut uniquement avoir un seul point de départ de flux.

Vous pouvez également créer manuellement un point de départ de flux.

1. Sélectionnez le cadre de départ.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Cliquez sur le signe Plus dans la section Point de départ du flux.

Pour afficher tous les points de départ de flux sur la page actuelle :

1. Désélectionnez tous les objets en cliquant sur un espace vide du plan de travail.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Dans la section Flux, affichez la liste de tous les points de départ de flux.
4. Passez le curseur de la souris sur le nom d'un flux et cliquez sur Sélectionner le cadre pour accéder au cadre où se trouve le point de départ.

Ajouter ou supprimer des cadres d'un flux

Une fois que vous avez un point de départ de flux, le reste du flux se compose de tous les cadres qui sont connectés au point de départ avec des interactions de prototypage. Cela inclut les cadres qui sont directement connectés au point de départ, ainsi que les cadres qui sont connectés par le biais d'autres interactions.

Par exemple, tous les cadres violets dans l'image ci-dessous sont inclus dans Flow 1 :

Pour supprimer un cadre d'un flux, supprimez toutes les interactions de prototype qui connectent le cadre à d'autres cadres dans le flux.

Les cadres peuvent être inclus dans plusieurs flux. Par exemple, le cadre bleu dans l'image ci-dessous est inclus à la fois dans Flow 1 et Flow 2 :

Lorsqu'un utilisateur navigue vers un cadre qui est inclus dans plusieurs flux, il peut utiliser toutes les interactions de ce cadre. Cela élargit le flux original pour inclure toutes les connexions à partir de ce cadre.

Gérer les flux de prototype

Modifier le nom du flux

Une fois que vous avez créé un flux, Figma le nommera par défaut Flow 1 et les flux supplémentaires seront nommés Flow 2, Flow 3, etc. Vous pouvez renommer un flux à tout moment.

Pour renommer un flux :

1. Sélectionnez le cadre de départ.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Dans la section Point de départ du flux, sélectionnez le champ du nom du flux.
4. Saisissez un nouveau nom de flux.

Une fois renommé, le nom d'un flux est affiché dans l'icône de point de départ bleue du cadre et dans la barre latérale de gauche en mode présentation.

Ajouter la description du flux

Les noms et descriptions des flux sont affichés dans la barre latérale de gauche en mode Présentation. Utilisez les descriptions pour fournir des indications aux participants des tests de faisabilité ou un contexte supplémentaire et de la documentation à votre équipe. Les descriptions peuvent être formatées avec du texte en gras, des listes numérotées ou à puces et des liens hypertextes.

Pour ajouter une description de flux :

1. Sélectionnez le cadre avec le point de départ du flux.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Dans la section Point de départ du flux, cliquez sur Modifier la description à côté du nom du flux que vous souhaitez modifier.
4. Ajoutez une description de texte riche.
5. Cliquez sur X pour fermer le panneau Description et enregistrer la description.

Une fois ajoutée, la description s'affiche dans la barre latérale de gauche en mode Présentation.

Déplacer le point de départ du flux

Par défaut, Figma utilise la première connexion que vous créez comme point de départ du flux. Vous pouvez déplacer un point de départ vers un autre cadre.

1. Localisez l'icône du point de départ bleu sur le plan de travail.
2. Cliquez et faites glisser le nom du flux vers un nouveau cadre de départ.

Supprimer le point de départ du flux

Pour supprimer le point de départ d'un flux :

1. Sélectionnez le cadre avec le point de départ du flux.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Dans la section Point de départ du flux, cliquez sur Supprimer le point de départ.

Exécuter et partager les flux de prototype

Afficher un aperçu des flux

Vous pouvez prévisualiser vos flux de prototype directement dans l'éditeur, avec un aperçu en ligne.

1. Désélectionnez tous les objets en cliquant sur un espace vide du plan de travail.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Dans la section Flux, affichez la liste de tous les flux.
4. Passez le curseur de la souris sur le nom d'un flux et cliquez sur Aperçu pour ouvrir l'aperçu en ligne.

Dans l'aperçu en ligne, parcourez votre flux en déclenchant chaque interaction de prototype.

Copier et partager des liens de flux

Vous pouvez partager des flux de prototypes avec d'autres personnes afin de recueillir des avis sur certains flux ou parcours utilisateur. Lorsque vous partagez un flux de prototype, les utilisateurs peuvent exécuter le prototype en mode Présentation. Dans le mode Présentation, les utilisateurs peuvent également sélectionner n'importe quel autre flux à exécuter.

Dans le plan de travail :

1. Sélectionnez le cadre avec le point de départ du flux.
2. Sélectionnez l'onglet Prototype dans la barre latérale de droite.
3. Passez le curseur de la souris sur l'en-tête Point de départ de flux.
4. Cliquez sur Copier le lien.

Dans le mode Présentation :

1. Sélectionnez le flux que vous souhaitez partager dans la barre latérale de gauche.
2. Cliquez sur Partager le prototype dans la barre d'outils.
3. Cliquez sur Copier le lien.