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

Avant de commencer

À qui est destinée cette fonctionnalité ?

Accessible à toutes les équipes et avec n'importe quel forfait.

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

Dans les prototypes, nous cherchons à ce que nos interactions ressemblent le plus possible à la réalité, en particulier lorsque nous passons d'un cadre à l'autre.

La gestion des états nous permet de conserver les propriétés et les états des objets lorsque nous naviguons dans les cadres et d'un cadre à l'autre lors 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 un cadre puis que vous y revenez.
Partage des états : partagez des états entre des objets correspondants dans différents cadres.
Réinitialisation des états : réinitialisez les états des objets à chaque interaction.

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

Remarque : dans les nouvelles interactions, la position de défilement est partagée automatiquement à partir du moment où les noms des objets correspondent d'un cadre à l'autre.

Pour les interactions créées avant le 24 mai 2023, la position de défilement est partagée uniquement si la configuration Conserver la position de défilement est activée. Cette configuration n'est pas disponible pour les nouvelles interactions, car cette fonction est activée par défaut.

Avant de mettre à jour la gestion des états, nous vous recommandons de vérifier que vos cadres et vos objets sont nommés de manière appropriée afin que la position de défilement soit partagée entre les cadres comme prévu. Si vous ne souhaitez pas partager la position de défilement, renommez vos calques de manière à ce qu'ils ne correspondent pas, ou désactivez l'option Réinitialiser la position de défilement.

Mémorisation des états

Lorsque vous naviguez d'un cadre à 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 souviendra de l'état de cette variante. Cela signifie que si vous quittez ce cadre et que vous y revenez plus tard, le composant interactif restera coché.

A prototype showing an email settings page. A few settings are checked off. When the prototype navigates to the next frame, then back to the original frame, the same settings are still checked off.

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 ce cadre, puis que vous y revenez plus tard, le défilement reprendra au même endroit sur la carte.

A prototype showing a map. The user scrolls to a specific location on the map, navigates away, and then returns to the map, which is still scrolled to the same location.

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 un cadre et, au bout de 5 secondes, passer à un autre cadre. Si vous revenez au premier cadre, la lecture de la vidéo se poursuivra à partir des 5 secondes, là où vous l'avez laissée.

A prototype of a video player. The video starts playing, then the user navigates to another frame. When they return to the video, the video resumes playing where it left off.

Partage des états

Lorsque vous naviguez entre des cadres 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 qu'après qu'une première interaction ait 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 chacun des deux cadres. Lorsque vous utilisez votre prototype, vous cochez la case dans le premier cadre. Ensuite, lorsque vous passez au deuxième cadre, le composant correspondant du deuxième cadre sera également défini sur la variante cochée.

A prototype showing an email settings page. A few settings are checked off. When the prototype navigates to the next frame, the matching interactive components are also checked off.

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 chacun des deux cadres, et que vous faites défiler l'écran jusqu'à un endroit précis, puis que vous passez au deuxième cadre, l'objet correspondant du second cadre défilera jusqu'au même endroit.

A prototype showing a map. A user scrolls to a location. When the prototype navigates to the next frame, the matching map object is scrolled to the same location.

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 un cadre et que vous passez dans un second cadre ayant un objet vidéo correspondant, la lecture de la vidéo se poursuivra dans le second cadre à partir de là où vous l'avez laissée.

A prototype showing a video player. When the uesr navigates to the next frame, the matching map video object on the next frame starts playing from where the first video left off.

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 au cadre suivant.

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 canevas
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.

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 un cadre 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.

A prototype showing a loading page. When the prototype navigates to the next frame, the loading bar restarts.

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 canevas.

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 cadres, et cochez donc le paramètre Réinitialiser la position de défilement sur l'interaction.

A prototype showing a map. A user scrolls to a location. When the prototype navigates to the next frame, the scroll location resets to its starting position.

Vidéos

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

Par exemple, vous pouvez commencer la lecture d'une vidéo dans un cadre et, au bout de 5 secondes, passer à un autre cadre. Si vous revenez au cadre 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.

A prototype showing a video player. When the user navigates to the next frame, the video restarts from the beginning.

Objets correspondants

Pour partager des états entre différents cadres, les objets doivent correspondre.

Pour identifier les objets qui correspondent entre les cadres :

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 canevas.
Figma mettra l'objet correspondant en surbrillance dans tous les autres cadres où il est présent.

Multiple frames are shown on a Figma canvas. There are matching bottom navigation bars on all three frames, highlighted in blue.

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 cadres 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.

Cadres de premier niveau

Les cadres de premier niveau sont les cadres placés directement sur le canevas. Comme ils n'ont pas d'objets parents, vous pouvez les faire correspondre 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, un cadre de premier niveau nommé Checkout / 1 correspondra à un autre cadre de premier niveau nommé Checkout / 2, car tout ce qui précède la barre oblique est identique.

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'un cadre à 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'un cadre à 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 à condition que les noms des objets correspondent d'un cadre à l'autre.

Pour les interactions créées avant le 24 mai 2023, la position de défilement est partagée uniquement si le paramètre Conserver la position de défilement est activé. Ce paramètre n'est pas disponible pour les nouvelles interactions étant donné que cette fonction est activée par défaut.

Avant de mettre à jour la gestion des états, nous vous recommandons de vérifier que vos cadres et vos objets sont nommés correctement de manière à ce que la position de défilement soit partagée d'un cadre à l'autre comme prévu. Si vous ne souhaitez pas partager la position de défilement, renommez vos calques de manière à ce qu'ils ne correspondent pas, ou activez l'option Réinitialiser la position de défilement.

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.

A side by side of old vs. new Interaction Details modal.

Conseil : pour mettre à jour toutes les interactions d'un fichier à la fois, cliquez avec le bouton droit de la souris sur le canevas et sélectionnez Mettre à jour toutes les interactions.

···

Mémorisation des états

Partage des états

Réinitialisation des états

Objets correspondants

Objets imbriqués

Cadres de premier niveau

Mise à jour de la gestion des états