Gestion des états des prototypes – Figma Learn - Centre d'aide

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible pour toutes les équipes, quel que soit le forfait.

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

Dans les prototypes, nous voulons que nos interactions ressemblent le plus possible à la réalité, surtout lorsqu'il s'agit de naviguer d'une frame à l’autre.

La gestion des états permet de conserver les propriétés et les états des objets lorsque nous naviguons dans les frames et d'une frame à l'autre dans le cadre de l'utilisation des prototypes.

La gestion des états peut être utilisée de trois manières avec les composants interactifs, la position de défilement et les vidéos dans les prototypes :

Mémorisation des états : conservez l'état d'un objet lorsque vous quittez une frame puis que vous y revenez.
Partage des états : partagez des états entre des objets correspondants dans différentes frames.
Réinitialisation des états : réinitialisez les états des objets à chaque interaction.

Pour partager des états entre des frames, les objets doivent correspondre.

Mises à jour pour conserver la position de défilement

Nous avons mis à jour le paramètre Conserver la position de défilement. La position de défilement des frames de premier niveau est désormais préservée automatiquement, tant que les noms des frames de premier niveau sont identiques ou partagent un préfixe. Renommer en masse des calques pour ajouter un préfixe partagé.

En savoir plus sur la conservation de la position de défilement →

Nouvelle et ancienne gestion des états Figma : les noms de calques contrôlent maintenant le comportement du partage de position de défilement ; auparavant, une case à cocher était utilisée.

Mémorisation des états

Lorsque vous naviguez d'une frame à l'autre, les objets se rouvrent dans le dernier état dans lequel ils ont été configurés.

Composants interactifs

Figma mémorise la dernière variante configurée de votre composant interactif.

Par exemple, si vous configurez un composant interactif de case à cocher sur la variante cochée, Figma se souvient de l'état de cette variante. De ce fait, si vous quittez cette frame et que vous y revenez plus tard, le composant interactif reste à l'état coché.

Prototype montrant la page des paramètres de messagerie avec une case à cocher pour les notifications. Les états sont préservés lors de la navigation entre les frames.

Position de défilement

Figma mémorise votre position de défilement.

Par exemple, si vous faites défiler l'écran d'une carte pour laquelle le défilement horizontal et vertical est activé jusqu'à un endroit spécifique, Figma mémorise la position de votre défilement. Cela signifie que si vous quittez cette frames, puis que vous y revenez plus tard, le défilement reprend au même endroit sur la carte.

Prototype interactif Figma montrant la navigation sur la carte et la mémorisation des états de la position de défilement à travers les frames.

Vidéos

Figma mémorise l'état de lecture de toutes les vidéos utilisées dans vos prototypes.

Par exemple, vous pouvez commencer la lecture d'une vidéo dans une frame et, au bout de 5 secondes, passer à une autre frame. Si vous revenez à la première frame, la lecture de la vidéo se poursuit à partir des 5 secondes, là où vous l'avez laissée.

Prototype montrant la mémorisation des états avec une photo de chat et les paramètres de messagerie, démontrant les états préservés à travers les frames.

Partage des états

Lorsque vous naviguez entre des frames ayant des objets correspondants, l'état du premier objet est partagé avec le second objet.

Composants interactifs

Figma partage les états entre les composants interactifs correspondants. Les états ne sont partagés que lorsqu'une première interaction a eu lieu avec le composant.

Par exemple, vous pouvez avoir un composant interactif pour une case, avec un exemple de la variante non cochée dans chacune des deux frames. Lorsque vous utilisez votre prototype, vous cochez la case dans la première frame. Ensuite, lorsque vous passez à la deuxième frame, le composant correspondant de cette frame est également défini sur la variante cochée.

Prototype d'une page de paramètres de messagerie montrant la mémorisation des états ; les sélections persistent lors de la navigation entre les frames.

Position de défilement

Figma partage la position de défilement entre des objets correspondants.

Par exemple, si le défilement horizontal et vertical est activé sur une carte dans chacune des deux frames et que vous faites défiler l'écran jusqu'à un endroit précis, puis que vous passez à la deuxième frame, l'objet correspondant de celle-ci défile jusqu'au même endroit.

Prototype interactif d'une application de carte montrant des frames liées avec les positions de défilement et les options de navigation préservées.

Vidéos

Figma partage les états de lecture de vidéos entre des objets correspondants.

Par exemple, si vous lancez la lecture d'une vidéo dans une frame et que vous passez dans une seconde frame ayant un objet vidéo correspondant, la lecture de la vidéo se poursuit dans la seconde frame à partir de là où vous l'avez laissée.

Prototype montrant un lecteur vidéo. Lorsque l'utilisateur navigue vers la frame suivante, la lecture de l'objet vidéo de carte correspondant sur cette frame commence là où la première vidéo s'est arrêtée.

Réinitialisation des états

Lorsque les utilisateurs naviguent dans les prototypes, il peut être nécessaire de réinitialiser l'état d'un objet lors d'interactions spécifiques. L'état des objets doit être réinitialisé lors de l'interaction qui permet de passer à la frame suivante.

Cliquez sur une connexion de prototype pour ouvrir le panneau Détails de l'interaction.
Dans la section Gestion des états du panneau, cochez l'un des paramètres suivants :
1. Réinitialiser la position de défilement : réinitialisation à l'emplacement de défilement d'origine
2. Réinitialiser l'état du composant : réinitialisation à l'état d'origine du composant, comme défini sur le plan de travail
3. Réinitialiser l'état de la vidéo : redémarrage de la vidéo depuis le début et réinitialisation à son état de lecture initial

Panneau des détails d'interaction affichant les options de gestion des états : Réinitialiser la position de défilement, position de la vidéo et état du composant.

Remarque : Les paramètres de réinitialisation n'apparaissent dans le panneau Détails de l'interaction que s'ils concernent l'interaction sélectionnée. Par exemple, si l'interaction concerne une frame sans vidéo, le paramètre Réinitialiser l'état de la vidéo n'apparaîtra pas.

Composants interactifs

Réinitialise les états des composants interactifs à leur état d'origine, comme défini sur le canevas.

Par exemple, prenons le cas d'un composant interactif pour une barre de chargement avec les variantes vide et terminé.

Vous souhaitez que la barre de chargement redémarre sur la variante vide lorsque l'utilisateur clique sur le bouton de rechargement. Vous cochez donc le paramètre Réinitialiser l'état du composant sur le bouton d'interaction.

Prototype sur un plan de travail Figma montrant un flux de connexion d'appareil portable avec une barre de chargement et un bouton de nouvelle tentative pour gérer les erreurs.

Position de défilement

Cliquez sur Réinitialiser la position de défilement pour revenir à l'emplacement de défilement d'origine, comme défini sur le plan de travail.

Par exemple, prenons l'exemple d'une carte pour laquelle le défilement horizontal et vertical est activé. Vous souhaitez revenir à l'emplacement de défilement d'origine lorsque vous naviguez entre les frames, et cochez donc le paramètre Réinitialiser la position de défilement sur l'interaction.

Prototype de carte interactive montrant la mémorisation des états et la connexion entre les frames avec une position de défilement persistante.

Vidéos

Redémarre la vidéo depuis le début et rétablit son état de lecture initial, comme défini sur le plan de travail.

Par exemple, vous pouvez commencer la lecture d'une vidéo dans une frame et, au bout de 5 secondes, passer à une autre frame. Si vous revenez à la frame d'origine et que vous souhaitez redémarrer la vidéo depuis le début, cochez le paramètre Réinitialiser l'état de la vidéo sur l'interaction.

Prototype montrant un lecteur vidéo. Lorsque l'utilisateur passe à la frame suivante, la vidéo redémarre depuis le début.

Objets correspondants

Pour partager des états entre différentes frames, les objets doivent correspondre.

En savoir plus sur les objets correspondants →

Pour identifier les objets qui correspondent entre les frames :

Ouvrez l'onglet Prototype dans la barre latérale de droite.
Passez le curseur de la souris sur un objet ou un calque dans le plan de travail.
Figma met l'objet correspondant en surbrillance dans toutes les autres frame où il est présent.

Trois frames Figma montrant la navigation à travers une application d'explorateur avec des barres de navigation correspondantes sur toutes les frames.

Objets imbriqués

Les objets sont considérés comme correspondants s'ils ont le même nom de calque et le même ensemble de parents dans les frames de premier niveau.

Conseil : Si vous ne souhaitez pas que l'état soit partagé entre deux objets, vous pouvez les renommer afin qu'ils ne correspondent plus.

Frames de premier niveau

Les frames de premier niveau sont les frames placées directement sur le plan de travail. Comme elles n'ont pas d'objets parents, vous pouvez les apparier en procédant de l'une des manières suivantes :

Utiliser des noms de calque identiques
Utiliser des noms de calques avec des chaînes correspondantes et des barres obliques. Par exemple, une frame de premier niveau nommée Checkout / 1 correspondra à une autre frame de premier niveau nommée Checkout / 2, car tout ce qui précède la barre oblique est identique.

Conseil : Besoin de renommer des calques ? En savoir plus sur le renommage des calques en masse →

Mise à jour de la gestion des états

Figma a mis à jour ses contrôles de gestion des états le 24 mai 2023.

Pour les interactions de prototypes créés avant le 24 mai 2023 :

Les composants interactifs ne peuvent pas partager d'états d'une frame à l'autre.
Les objets de défilement ne peuvent pas mémoriser leur état lors de leur réouverture.
Les objets de défilement peuvent partager les états d'une frame à l'autre uniquement si le paramètre Conserver la position de défilement est coché.

Remarque : Dans les nouvelles interactions, la position de défilement est partagée automatiquement, tant que les noms des objets correspondent à travers les frames.

En savoir plus sur la préservation de la position de défilement et la transition vers une nouvelle gestion des états →

Pour mettre à jour les contrôles de gestion des états et les appliquer aux anciennes interactions :

Cliquez sur une connexion de prototype pour ouvrir le panneau Détails de l'interaction.
Cliquez sur Mettre à jour.

Ancien et nouveau panneau de détails d'interaction comparant les options de gestion des états dans les prototypes, en soulignant les fonctionnalités de réinitialisation.

Conseil : Une fois que vous avez mis à jour une interaction, un message de succès apparaît en bas du plan de travail. Cliquez sur le bouton Tout mettre à jour sur la bannière du message de succès afin de mettre à jour toutes les autres interactions dans le fichier.