Actions de prototype
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible dans tous les forfaits.
Toute personne disposant de l'accès peut éditer pour un fichier peut créer des prototypes.
Vous débutez dans le prototypage ? Consultez notre guide Se lancer dans le prototypage.
L'action définit la prochaine étape ou le prochain événement dans un prototype. Il s'agit de la réponse à l'événement déclencheur de l'interaction. Par exemple, l'action peut être de Naviguer vers un autre cadre ou d'ouvrir une URL externe.
Pour en savoir plus sur les interactions et animations lors de la création de prototypes →
Types d'action
Naviguer vers
Cette action permet de passer d'un cadre à un autre dans un prototype. C'est le type d'action le plus courant à utiliser pour passer d'un écran à l'autre.
Retour
Cette option vous permet de revenir à l'écran précédent. C'est parfait pour simuler le bouton Retour dans vos Prototypes.
Définir une variable
L'action Set variable vous permet de définir ou de modifier la valeur d'une variable sous l'effet d'un déclencheur de prototype.
En savoir plus sur l'utilisation de variables avec des prototypes →
Logique conditionnelle
Déterminez si une condition est remplie avant d'effectuer une action, grâce à un instruction conditionnelle if/else.
En savoir plus sur l' utilisation de la logique conditionnelle →
Faire défiler
Cette action permet à votre prototype ou à un conteneur imbriqué de défiler jusqu'à n'importe quel objet dans le cadre de premier plan. Cela est utile pour répliquer des liens d'ancrage et des interactions avec des éléments déroulants comme des carrousels.
Si vous ajoutez Faire défiler à l'aide de la section Interactions du Panneau de prototypage, vous ne pourrez sélectionner que les éléments enfants directs aux cadres déroulants. Pour sélectionner un objet dans le cadre de premier plan, créez une connexion et liez-la à l'objet que vous souhaitez définir comme destination.
Avec Faire défiler, vous pouvez définir l'animation de défilement sur Instantané ou définir une atténuation à l'aide de l'option Animer.
Remarque : Pour faire glisser une connexion jusqu'à une destination masquée car en dehors d’un cadre, décochez la case Cacher le contenu extérieur du cadre dans la section du panneau de Design pour exposer le cadre de destination dans un premier temps.
Ouvrir un lien
Cette action vous permet de diriger l'utilisateur vers une URL en dehors du prototype. Cela est idéal pour les liens externes ou les ressources supplémentaires qui ne sont pas disponibles dans la navigation principale.
Saisissez votre URL dans le champ prévu à cet effet, une fois que vous avez sélectionné cette option.
Astuce ! Lorsque vous cliquez sur une zone interactive Ouvrir le lien, le lien s'ouvre dans un nouvel onglet. S'il s'agit d'un lien vers un site Web externe, l'utilisateur sera informé qu'il quitte Figma. Vous pouvez cocher la case pour ignorer cet avertissement à l'avenir. Ce paramètre sera enregistré uniquement sur l'appareil actuel.
Ouvrir la superposition
Cette action ouvre le cadre de Destination au-dessus du cadre actuel. Elle peut être utilisée pour afficher un mode, une info-bulle ou une alerte, à partir d'un bouton ou d'un autre élément du design.
Fermer la superposition
Cette action vous permet de fermer ou de masquer les superpositions qui sont apparues sur le cadre d'origine. Vous pouvez l'utiliser pour répliquer une fenêtre pop-up ou une alerte étant acceptée ou fermée.
Permuter la superposition
Cette action vous permet de remplacer un cadre par un autre. Le comportement est analogue à l'option Naviguer vers, lorsqu'elle est déclenchée à partir d'une zone interactive dans un cadre normal.
Si vous appliquez Permuter la superposition à une zone interactive dans une superposition, elle permutera la superposition actuelle avec le nouveau cadre de Destination. La nouvelle superposition conservera les mêmes paramètres de superposition que l'originale.
Remarque : L'utilisation de Permuter la superposition n'ajoutera pas ce cadre à l'historique du prototype. Si vous souhaitez qu'un utilisateur puisse utiliser l'action Retour pour passer d'une superposition à l'autre, nous vous recommandons d'utiliser l'option Naviguer vers.
Lire/mettre en pause la vidéo
L'action Lire/mettre en pause la vidéo est disponible pour toutes les interactions qui se terminent par une vidéo. Lors de la sélection, les actions suivantes sont disponibles :
- Lire la vidéo - Commencer la lecture de la vidéo
- Mettre en pause la vidéo - Mettre en pause la lecture de la vidéo
- Activer/désactiver la lecture/la mise en pause - Passer de la lecture vidéo à la mise en pause
En savoir plus sur les prototypes et les vidéos →
Désactiver/activer le son de la vidéo
L'action Désactiver/activer le son de la vidéo est disponible pour toutes les interactions qui se terminent par une vidéo. Lors de la sélection, les actions suivantes sont disponibles :
- Désactiver le son de la vidéo - Mettre en sourdine la vidéo
- Activer le son de la vidéo - Activation du son de la vidéo
- Basculement son désactivé/activé - Passer de la mise en sourdine à l'activation du son de la vidéo
En savoir plus sur les prototypes et les vidéos →
Définir un horodatage spécifique
L'action Définir un horodatage spécifique est disponible pour toutes les interactions qui se terminent par une vidéo. Cette action permet de passer à un moment précis de la vidéo. Vous pouvez définir l'horodatage après avoir sélectionné l'action Définir un horodatage spécifique.
Remarque : Si vous saisissez un horodatage qui dépasse la durée totale de la vidéo, l'action vous fera atterrir à la fin de la vidéo. Si le paramètre de vidéo en boucle est activé, la vidéo sera relue depuis le début.
En savoir plus sur les prototypes et les vidéos →
Avancer/retourner en arrière
L'action Avancer/retourner en arrière est disponible pour toutes les interactions qui se terminent par une vidéo. Lors de la sélection, les actions suivantes sont disponibles :
- Avancer - Définir un nombre de secondes pour avancer dans la lecture de la vidéo.
- Retourner en arrière - Définir un nombre de secondes pour retourner en arrière dans la vidéo.
Cette action peut être utile lors de la conception d'une expérience vidéo interactive.
Remarque : Si vous avancez jusqu'à dépasser la durée totale de la vidéo, l'action vous fera atterrir à la fin de la vidéo. Si le paramètre de vidéo en boucle est activé, la vidéo sera relue depuis le début.
En savoir plus sur les prototypes et les vidéos →
Changer en
L'action Changer en est disponible lors de la création de prototypes avec des composants interactifs.
Utilisez l'action Changer en pour passer d'une variante à une autre dans un ensemble de composants. Par exemple, vous pouvez avoir un ensemble de composants pour une icône de case à cocher, avec une variante Coché et une variante Décoché. Avec l'action Changer en, vous pouvez passer de la variante Coché à la variante Décoché dans votre prototype.
Conseil : vous pouvez utiliser l'action Changer en sur une instance imbriquée pour changer la variante du composant parent.