Lisez vos prototypes
Avant de commencer
Qui peut utiliser cette fonctionnalité
Les utilisateurs de toutes les équipes ou de tous les forfaits peuvent lire des prototypes.
Toute personne disposant de l'accès peut voir pour un fichier ou un prototype peut lire des prototypes. Toute personne sans restriction 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 développement. Dans Figma, créez des prototypes directement dans le canevas. 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 :
- Prévisualiser : lisez le prototype directement dans l'éditeur, avec un aperçu en ligne. Utilisez Prévisualiser pour voir comment le prototype fonctionne au fur et à mesure que vous le créez, et ce, dans le même onglet.
- Présenter : lisez le prototype en mode présentation, dans un onglet distinct. Utilisez Présenter pour partager le prototype avec d'autres personnes ou voir comment il se présente sur un appareil spécifique.
Préparer des prototypes à la lecture
La façon dont les cadres et les connexions sont disposés sur le canevas 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'un cadre.
- Si des connexions de prototype existent, Figma n'affichera que les cadres avec des connexions lors de la lecture de prototype. Cliquez sur chaque écran ou interagissez avec toute zone interactive.
- Si aucune connexion de prototype n'existe, vous pouvez parcourir les cadres de la page actuelle.
- Fixez un point de départ de flux pour déterminer où le parcours utilisateur doit commencer. Vous pouvez fixer 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 que vous avez préparé le prototype à la lecture, sélectionnez Prévisualiser ou Présenter.
Prévisualiser votre prototype
Utilisez l'aperçu en ligne pour lire votre prototype directement sur le canevas où se trouve votre design. Avec l'aperçu en ligne, toute modification de design est immédiatement prise en compte.
Pour ouvrir l'aperçu en ligne, cliquez sur Prévisualiser dans la barre d'outils supérieure.
Vous pouvez également ouvrir l'aperçu en ligne en cliquant sur l'icône d'aperçu sur tout point de départ de flux.
Sinon, appuyez sur les touches Maj Espace de votre clavier.
Pour afficher votre aperçu dans un format réaliste, sur un téléphone ou une tablette par exemple, choisissez un type d'appareil depuis les paramètres de prototype.
Utiliser l'aperçu en ligne
Avec l'aperçu en ligne, vous pouvez :
- Redémarrer un prototype : le prototype est redémarré sur la base du dernier cadre sélectionné sur le canevas. Vous pouvez également appuyer sur la touche R pour effectuer le redémarrage.
-
Menu de défilement :
- Redimensionner à la taille réelle (100 %) : si un appareil de prototype a été défini pour la page, la taille de l'aperçu en ligne est adaptée à la taille du cadre de l'appareil. Si aucun cadre d'appareil n'a été défini, la taille de l'aperçu en ligne est adaptée à la taille du cadre sélectionné.
- Redimensionner le rapport hauteur/largeur : si aucun appareil de prototype n'a été sélectionné pour la page, la taille de l'aperçu en ligne est adaptée au rapport hauteur/largeur du cadre actuel.
- Suivre le cadre actif : lorsque cette option est activée, le cadre sélectionné dans le canevas est mis à jour pour correspondre au cadre actuel dans l'aperçu en ligne. Lorsque vous naviguez au sein du prototype dans l'aperçu, votre sélection et votre position dans le canevas suivent le mouvement.
- Ouvrir en mode présentation : ouvre le prototype dans le mode présentation.
- Ferme l'aperçu en ligne.
Avec l'aperçu en ligne, vous pouvez :
- Redimensionner : cliquez sur le bord de l'aperçu en ligne et faites-le glisser pour redimensionner ce dernier. Maintenez la touche Maj enfoncée pour un redimensionnement proportionnel.
- Sélectionner des cadres sur le canevas : cliquez sur un autre cadre sur le canevas pour prévisualiser ce cadre.
Présenter votre prototype
Utilisez le mode présentation pour lire vos prototypes dans un nouvel onglet.
Astuce : vous souhaitez partager vos prototypes avec des collaborateurs ? En savoir plus sur le partage de prototypes →
Pour ouvrir un prototype dans le mode présentation, cliquez sur Présenter dans la barre d'outils ou utilisez un raccourci clavier :
- Mac :Commande ⌘Option ⌥Retour
- Windows : CtrlAltEntrée
Mise en page du mode présentation
À partir du mode présentation, vous pouvez :
- Cliquer sur pour afficher ou masquer la barre latérale gauche
- Cliquer sur pour accéder au mode commentaires et ajouter des commentaires au prototype
- Afficher et sélectionner des flux
- Afficher la description d'un flux
- Définir les Options d'affichage du prototype
- Cliquer sur pour passer en mode plein écran
- Figma présentera l'appareil avec la couleur d'arrière-plan que vous avez sélectionnée
- Afficher l'appareil que vous avez sélectionné dans les paramètres de prototype
- Afficher votre curseur ou votre pointeur d'écran tactile (prototypes d'appareils mobiles uniquement)
- Utiliser des zones interactives ou entrer des raccourcis clavier dans votre prototype
- Utiliser et pour passer d'un écran à l'autre ou utiliser les touches fléchées de votre clavier.
- Utiliser le bouton Redémarrer ou appuyer sur R pour revenir au point de départ du flux actuel. S'il n'y a pas de flux, il reviendra au premier cadre du canevas.
Options du mode présentation
Dans le menu des options, vous pouvez activer ou désactiver les paramètres suivants :
Échelle
L'échelle définit la taille d'affichage de votre prototype. Vous avez le choix entre les options suivantes :
- Taille réelle (100 %) : affiche le prototype en se basant sur la taille complète du cadre. En fonction du cadre et de la taille de l'écran, le prototype peut être tronqué.
- Adapter à l'écran : réduit la taille du prototype pour qu'elle s'adapte aux dimensions de l'écran du spectateur.
- Adapter la largeur : redimensionner le prototype de manière à ce que sa largeur corresponde aux dimensions de l'écran du spectateur. Cette option n'est disponible que si vous utilisez une taille de cadre personnalisée et qu'aucun appareil n'est sélectionné.
- Remplir l'écran : met le prototype à l'échelle de manière à ce qu'il remplisse tout l'écran, quelle que soit la taille ou la résolution de l'écran. Contrairement à l'option Adapter la largeur, l'option Remplir l'écran permet de mettre le prototype à l'échelle pour qu'il remplisse des écrans plus grands.
Astuce : appuyez sur la touche Z dans le mode présentation pour passer d'une option d'échelle à l'autre.
Activer les raccourcis clavier de 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 commentaires résolus
Si vous êtes connecté à votre compte Figma, vous pouvez faire des commentaires sur un prototype. Vous pouvez notamment répondre aux commentaires ou les résoudre.
Vous pouvez choisir d'Afficher les commentaires résolus ou non sur le prototype. Les commentaires résolus apparaîtront avec les nouveaux commentaires ou les commentaires non résolus.
Afficher les signalisations de zones interactives
Les signalisations de zones interactives permettent de guider les utilisateurs dans un prototype. Elles indiquent où se trouvent les zones interactives dans un prototype. Lorsqu'un utilisateur clique sur une zone qui est en dehors d'une zone interactive, Figma met en évidence toutes les zones cliquables par le biais d'une zone de délimitation bleue.
Afficher la barre latérale
Les flux du prototype sont répertoriés dans la barre latérale gauche, avec toutes les descriptions qui leur ont été ajoutées. Pour masquer ou afficher la barre latérale lorsque vous êtes dans le mode présentation, cliquez sur la barre d'outils supérieure. Vous pouvez également cocher la case Afficher la barre latérale dans le menu Options de la barre d'outils supérieure.
Lorsque la barre latérale est affichée, le lien de partage du prototype est mis à jour avec une variable &show-proto-sidebar=1.
Afficher l'interface utilisateur de Figma
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 va :
- masquer la barre d'outils et le pied de page de la vue actuelle ;
- masquer la barre latérale des flux si l'option Afficher la barre latérale est cochée dans le menu Options ;
- mettre à jour l'URL du prototype avec une variable
&hide-ui=1; - vous rappeler comment restaurer la barre d'outils et le pied de page ;
- vous permettre de copier le lien de partage mis à jour. Si vous partagez ce lien, Figma masquera 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 mettra à jour l'URL de partage du prototype. Veillez à copier la nouvelle URL si vous effectuez des modifications.
Ordre des cadres et navigation
Lors de la lecture de votre prototype, vous pouvez appuyer sur →, Espace ou N pour passer au cadre suivant, et sur ← pour passer au cadre précédent. Ce paramètre est activé par défaut.
L'ordre des cadres est déterminé par leur position sur le canevas ou par les connexions de prototype que vous avez créées.
Prototypes avec un point de départ du flux
Si votre prototype a un point de départ, Figma créera un « historique » des cadres que vous avez consultés pendant la visualisation du prototype.
-
←permet de passer au cadre précédent, s'il y en a un. -
→permet de passer au cadre suivant. S'il n'y a pas d'historique (après avoir utilisé←, par exemple), il passera au prochain cadre non consulté.
Prototypes sans point de départ du flux
Si un prototype n'a pas de point de départ de flux, Figma met les cadres dans un ordre déterminé par leurs coordonnées dans le canevas. D'abord, par leur coordonnée x de gauche à droite, puis par leur coordonnée y de haut en bas.
Si la coordonnée y est décalée d'une manière ou d'une autre, les cadres peuvent apparaître dans le désordre. Pour y remédier, vous pouvez sélectionner l'alignement horizontal de chaque rangée de cadres pour les aligner en haut.
-
←passe au cadre précédent, s'il y en a un. -
→permet de passer au cadre suivant. D'abord par la coordonnée x, puis par la coordonnée y.