Avant de commencer
Qui peut utiliser cette fonctionnalité
Les utilisateurs de toutes les équipes ou de tous les forfaits peuvent lire des prototypes.
Quiconque disposant de l'accès peut voir au niveau d'un fichier ou d'un prototype peut lire des prototypes. Quiconque peut ajuster les options d'affichage dans le mode présentation.
Les prototypes reproduisent la façon dont les utilisateurs pourraient interagir avec vos designs, ce qui vous permet de voir et de tester leur fonctionnement avant de passer à la phase de développement. Dans Figma, créez des prototypes directement dans le plan de travail. Ensuite, lisez-les pour voir les interactions des prototypes et les animations en action.
Avant de lancer la lecture d'un prototype, préparez le design afin que le prototype soit lu comme vous le souhaitez.
Ensuite, sélectionnez la manière dont le prototype doit être lu :
- Aperçu : lancez le prototype directement dans l’éditeur, avec un aperçu en ligne. Voyez comment le prototype fonctionne au fur et à mesure que vous le construisez – le tout dans le même onglet.
- Présent : lancez le prototype en mode présentation, dans un onglet séparé. Partagez le prototype avec d'autres utilisateurs ou voyez comment il se présente sur un appareil spécifique.
Préparer la lecture de prototypes
La façon dont les frames et les connexions sont disposées sur le plan de travail a un impact sur la manière dont les prototypes sont lus :
- Vous ne pouvez lancer les actions Prévisualiser ou Présenter que si le design se trouve à l'intérieur d'une frame.
- S'il existe des connexions de prototype, Figma n'affiche que les frames comportant des connexions lors de la lecture du prototype. Cliquez sur chaque écran ou interagissez avec une zone interactive.
- S'il n'existe aucune connexion de prototype, vous pouvez parcourir les frames de la page actuelle.
- Définissez un point de départ de flux pour déterminer où le parcours utilisateur doit commencer. Vous pouvez définir plusieurs points de départ de flux.
- Pour le mode présentation, définissez le type d'appareil, le point de départ et la couleur d'arrière-plan du prototype dans les paramètres de prototype.
Une fois le prototype prêt à être lu, choisissez de Prévisualiser ou de Présenter votre prototype.
Prévisualiser un prototype
Utilisez l'aperçu en ligne pour lire votre prototype directement sur le plan de travail à côté de votre design. Avec l'aperçu en ligne, toutes les modifications de design sont immédiatement reflétées dans l'aperçu afin que vous puissiez les voir en temps réel. Lorsque vous cliquez sur une autre frame sur le plan de travail, l'aperçu passe à cette frame.
Pour ouvrir l'aperçu en ligne, effectuez l'une des actions suivantes :
- Cliquez sur Aperçu dans la barre d'outils supérieure.
- Cliquez sur l'icône d'aperçu sur un point de départ du flux.
- Utilisez les touches ⇧ Maj Espace de votre clavier.
Avec l'aperçu en ligne, vous pouvez :
- Utiliser les flèches gauche et droite pour avancer ou revenir en arrière dans le prototype.
- Redémarrer le prototype à partir de la dernière frame sélectionnée sur le plan de travail. Vous pouvez également appuyer sur R pour redémarrer.
- Ouvrir le menu déroulant afin de choisir parmi différentes options de mise à l'échelle pour votre prototype.
- Ouvrir le prototype en mode présentation dans un nouvel onglet.
- Cliquer sur le X pour fermer l'aperçu en ligne.
- Redimensionner l'aperçu en cliquant sur le bord de la fenêtre d'aperçu et en le faisant glisser. Maintenez la touche ⇧ Maj enfoncée pour redimensionner l'aperçu proportionnellement.
Options du menu déroulant
Le menu déroulant du Spectateur en ligne contient différentes options de mise à l'échelle et d'affichage de votre prototype. Les options disponibles dépendent de l'existence ou non d'un appareil de prototype sélectionné. Certaines de ces options se chevauchent.
Ajuster à la largeur
Ajustez l'échelle du prototype pour qu'il remplisse la largeur de l'affichage. Disponible uniquement si l'appareil de prototype est défini sur Aucun appareil ou Présentation sur la page.
Responsive
Le contenu du prototype est redimensionné et la mise en page est modifiée tandis que l'aperçu du prototype se redimensionne en fonction des contraintes et des propriétés de mise en page automatique appliquées au design. Cela vous permet de voir les designs dans différentes tailles de fenêtre et de vérifier leur comportement responsive. Pour que l'option Responsive fonctionne, des contraintes et des paramètres de mise en page automatique doivent être appliqués au design.
Suivre le prototype
La frame sélectionnée sur le plan de travail se met à jour pour refléter la frame actuelle dans l'aperçu en ligne. Lorsque vous naviguez dans le prototype en mode aperçu, votre sélection de plan de travail et votre position suivent.
Redimensionner la fenêtre/l'appareil à 100 %
Redimensionne le Spectateur ou l'appareil à 100 % de la taille de la frame.
Respecter le rapport hauteur/largeur
La fenêtre du Spectateur en ligne se redimensionne en fonction du rapport hauteur/largeur de la frame actuelle. Disponible uniquement lorsqu'un appareil de prototype est défini sur Aucun appareil.
Afficher la frame de l'appareil
Affichez ou masquez la frame physique de l'appareil. Disponible uniquement lorsqu'une frame d'appareil de prototype est sélectionnée.
Présenter un prototype
Utilisez le mode présentation pour lire vos prototypes dans un nouvel onglet. Vous pouvez interagir avec des zones interactives ou entrer des raccourcis clavier dans votre prototype.
Pour ouvrir un prototype en mode présentation sur votre ordinateur, cliquez sur Présenter dans la barre d'outils ou utilisez un raccourci clavier :
- Mac :Commande ⌘ Option ⌥Retour
- Windows : CtrlAltEntrée
Figma présente l'appareil dans la couleur d'arrière-plan que vous avez sélectionnée.
Conseil : vous souhaitez partager votre prototype avec d'autres utilisateurs ? En savoir plus sur le partage de prototypes.
Vous souhaitez lire votre prototype sur un appareil mobile ? En savoir plus sur l'affichage de prototypes sur un appareil mobile.
Mise en page du mode présentation
Le mode présentation contient diverses options parmi lesquelles vous pouvez choisir pour interagir avec un prototype.
Sur le côté gauche de la barre d'outils, vous pouvez :
- Cliquer sur le logo Figma pour accéder au navigateur de fichiers.
- Cliquer sur pour afficher et masquer la barre latérale gauche, où vous pouvez sélectionner des flux et voir leurs descriptions.
- Cliquer sur pour accéder au mode commentaires et ajouter des commentaires au prototype.
Sur le côté droit de la barre d'outils, vous pouvez :
- Cliquer sur la flèche à côté de votre avatar et choisir de vous mettre en avant ou de suivre un présentateur.
- Partager ce prototype.
- Ouvrir le menu d'options afin de sélectionner différents paramètres pour le prototype.
- Cliquer sur pour passer en mode plein écran.
Dans le bas de l'écran du mode présentation, vous pouvez :
- Utiliser les flèches gauche et droite pour naviguer entre les écrans.
- Utiliser l'interrupteur d'appareil pour passer à un appareil similaire et accéder à d'autres options de mise à l'échelle. Disponible si une frame d'appareil est sélectionnée pour la page.
- Cliquer sur Redémarrer ou appuyer sur R pour revenir au point de départ du flux actuel. En l'absence de flux, l'affichage revient à la première frame sur le plan de travail.
Menu d'options
Cliquez sur afin d'ouvrir le menu d'options pour accéder à des paramètres supplémentaires.
Les options suivantes sont toujours disponibles :
Activer les raccourcis Figma
Pour activer les raccourcis clavier de Figma, tels que :
- C pour ouvrir les commentaires
- F pour passer en mode plein écran
Lorsque cette option est activée, les utilisateurs peuvent naviguer dans les prototypes à l'aide de touches, telles que les touches fléchées gauche et droite de leur clavier.
Lorsque cette option est désactivée, les utilisateurs ne peuvent naviguer dans les prototypes qu'en cliquant sur les zones interactives ou en cliquant sur les icônes des flèches gauche et droite au bas de l'écran.
Afficher les astuces au clic
Les indices de zones interactives permettent de guider les utilisateurs dans un prototype. Ils indiquent où se trouvent les zones interactives dans un prototype. Lorsqu'un utilisateur clique sur une zone située en dehors d'une zone interactive, Figma met en évidence toutes les zones cliquables par le biais d'une zone de délimitation bleue.
Make disponible hors ligne
Préchargez vos prototypes afin de pouvoir les présenter hors ligne.
Paramètres d'accessibilité
Les paramètres d'accessibilité permettent aux personnes présentant un handicap d'accéder à un prototype et d'interagir avec celui-ci. Par exemple, les personnes présentant un handicap visuel peuvent adapter un prototype aux lecteurs d'écran et autres technologies d'assistance.
Masquer l'UI
Vous pouvez choisir d'afficher ou de masquer l'interface utilisateur Figma du prototype dans le mode présentation. Ceci est utile lorsque vous testez un prototype et que vous voulez éviter toute distraction.
Lorsque vous masquez l'interface utilisateur de Figma en mode présentation, Figma :
- Masque la barre d'outils et le pied de page de la vue actuelle.
- Masque la barre latérale des flux si l'option Afficher la barre latérale est cochée dans le menu Options.
- Met à jour l'URL du prototype avec une variable
&hide-ui=1. - Vous rappelle comment restaurer la barre d'outils et le pied de page.
- Vous permet de copier le lien de partage mis à jour. Si vous partagez ce lien, Figma masque la barre d'outils, le pied de page et la barre latérale pour tous les autres utilisateurs.
Remarque : L'ajustement de certains paramètres dans le menu Options a pour effet de mettre à jour l'URL de partage du prototype. Veillez à copier la nouvelle URL si vous effectuez des modifications.
Le menu d'options contient également des options de mise à l'échelle de contenu et d'appareil pour déterminer comment la frame de votre prototype ou appareil s'affiche et est redimensionnée. Les types d'options de mise à l'échelle disponibles dépendent de l'existence ou non d'un appareil de prototype sélectionné :
Options de mise à l'échelle sans frame d'appareil
Si vous n'avez pas sélectionné d'appareil de prototype sur la page, le menu d'options propose les options de mise à l'échelle de contenu suivantes :
Taille réelle (100 %)
Affichez le prototype en fonction de la taille entière de la frame de design. Selon la taille de la frame et de l'écran, cela peut entraîner un prototype rogné.
Responsive
Le contenu du prototype est redimensionné et la mise en page est modifiée tandis que l'aperçu du prototype se redimensionne en fonction des contraintes et des propriétés de mise en page automatique appliquées au design. Cela vous permet de voir les designs dans différentes tailles de fenêtre et de vérifier leur comportement responsive. Pour que l'option Responsive fonctionne, des contraintes et des paramètres de mise en page automatique doivent être appliqués au design.
Ajuster à la largeur
Redimensionne le prototype pour qu'il remplisse la largeur de l'affichage.
Ajuster la largeur et la hauteur
Rétrécit le prototype de sorte que la largeur et la hauteur tiennent dans la fenêtre du Spectateur. Ne met pas le prototype à l'échelle.
Remplir l'écran
Met le prototype à l'échelle horizontalement et verticalement pour qu'il remplisse l'intégralité de l'affichage. Aucun contenu du design ne déborde.
Selon la taille des frames, le prototype utilise par défaut certains paramètres d'échelle et différentes options apparaissent dans les sections Recommandé et Autres options de mise à l'échelle du menu d'options :
|
Paramètre de mise à l'échelle par défaut |
Autres options recommandées et de mise à l'échelle |
|
|
La première frame est supérieure à 1 024 px |
Taille réelle (100 %) |
Responsive |
|
La première frame est inférieure à 1 024 px |
Taille réelle (100 %) |
Ajuster la largeur et la hauteur |
|
Toutes les frames ont un format 16:9 ou le type d'appareil est défini sur Présentation |
Remplir l'écran |
Taille réelle (100 %) |
|
Si le type d'appareil est réglé sur Personnalisé |
Ajuster la largeur et la hauteur |
Remplir l'écran Taille réelle (100 %) |
Options de mise à l'échelle avec frame d'appareil
Avec la frame d'appareil, le menu d'options offre les options de mise à l'échelle Responsive et Taille fixe.
Responsive
Le contenu du prototype est redimensionné et la mise en page est modifiée tandis que l'aperçu du prototype se redimensionne en fonction des contraintes et des propriétés de mise en page automatique appliquées au design. Cela vous permet de voir les designs dans différentes tailles de fenêtre et de vérifier leur comportement responsive. Pour que l'option Responsive fonctionne, des contraintes et des paramètres de mise en page automatique doivent être appliqués au design.
Taille fixe
Affiche le design à 100 % à l'intérieur de l'appareil. Selon la taille de la frame et de l'appareil, cela peut entraîner un prototype tronqué. Vous pouvez contrôler la taille de l'appareil avec les options de mise à l'échelle de l'appareil.
Si un appareil de prototype est sélectionné, l'interrupteur d'appareil devient disponible en bas du mode présentation, ce qui vous permet de choisir des appareils de prototype similaires à l'actuel. Des options de mise à l'échelle d'appareil sont également disponibles :
Ajuster l'appareil à l'écran
Rétrécissez la frame de l'appareil pour que ce dernier s'adapte à la fenêtre du Spectateur.
Ajuster l'appareil pour remplir l'écran
Mettez l'appareil à l'échelle pour qu'il remplisse l'intégralité de l'affichage.
Afficher l'appareil à 100 %
Affichez le prototype à 100 % de la taille de la frame. Selon la taille de la frame et de l'écran, cela peut entraîner un prototype rogné.
Afficher la frame de l'appareil
Si un appareil de prototype est sélectionné, cette option vous permet d'afficher ou de masquer la frame physique de l'appareil.
Astuce : Appuyez sur la touche Z de votre clavier dans le mode présentation pour passer d'une option de mise à l'échelle à l'autre.
Ordre des frames et navigation
Lors de la lecture de votre prototype, vous pouvez appuyer sur →, Espace ou N pour passer à la frame suivante, et sur ← pour passer à la frame précédente. Ce paramètre est activé par défaut.
L'ordre des frames est déterminé par leur position sur le plan de travail ou par les connexions de prototype que vous avez créées.
Prototypes avec point de départ du flux
Si votre prototype a un point de départ, Figma crée un « historique » des frames que vous avez consultées pendant la visualisation du prototype.
- ← permet de passer à la frame précédente, s'il en existe une de disponible.
- → permet de passer à la frame suivante. S'il n'existe pas d'historique (après avoir utilisé ←, par exemple), Figma passe à la prochaine frame non consultée.
Prototypes sans point de départ du flux
Si un prototype n'a pas de point de départ de flux, Figma place les frames dans un ordre déterminé par leurs coordonnées sur le plan de travail. D'abord, par leur coordonnée x de gauche à droite, puis par leur coordonnée y de haut en bas.
Si la coordonnée est décalée d'une manière ou d'une autre, les frames peuvent apparaître dans le désordre. Pour y remédier, vous pouvez sélectionner l'alignement horizontal de chaque rangée de frames afin de les aligner en haut.
- ← passe à la frame précédente, s'il en existe une de disponible.
- → passe à la frame suivante. D'abord par la coordonnée x, puis par la coordonnée y.