Toute personne disposant d'un accès peut éditer à un fichier peut créer et modifier des prototypes.
Les Options de défilement contrôlent la façon dont les utilisateurs peuvent interagir avec du contenu qui dépasse les dimensions d'un appareil.
Faire défiler une longue page de contenu vers le haut ou vers le bas
Faire défiler la page de gauche à droite pour afficher différents éléments dans un curseur.
Naviguer entre les images, les articles ou les publications dans les bibliothèques et les galeries.
Effectuer un panoramique ou un défilement dans n'importe quelle direction, comme sur une carte interactive.
Options de défilement
Les options de défilement ne peuvent s'appliquer qu'aux cadres et uniquement ceux qui se trouvent directement sur le canevas (cadres de premier niveau), ainsi que les cadres imbriqués dans d'autres cadres ou calques.
Pour appliquer des options de défilement, le contenu du cadre doit dépasser ses limites. Si vous modifiez les limites du cadre pour que tout le contenu s'y insère, le défilement régulier s'applique.
Figma prend en charge trois options de défilement différentes : Vertical, Horizontal et Vertical et horizontal.
Défilement vertical
Le défilement vertical permet aux utilisateurs de faire glisser ou de faire défiler vers le haut et vers le bas dans un cadre. Utilisez cette option pour imiter le défilement vers le bas d'un long site Web ou d'une page de contenu dans une application.
Remarque : Vous n'aurez pas toujours besoin d'appliquer des options de défilement pour imiter le défilement vertical. N'importe qui peut faire défiler toute la longueur (ou la largeur) d'une image dans un prototype.
Défilement horizontal
Le défilement horizontal permet aux utilisateurs de faire glisser ou de faire défiler vers la gauche et la droite dans un cadre, tout en conservant la position verticale. Utilisez cette option pour créer des curseurs pour le contenu, comme des produits, des galeries et des bibliothèques.
Défilement horizontal et vertical
Le défilement horizontal et vertical permet aux utilisateurs de naviguer dans n'importe quelle direction dans une image : gauche, droite, haut, ou bas. Utilisez cette option pour une prise en charge du défilement dans n'importe quelle direction, comme pour afficher une carte ou une image agrandie.
Appliquer des options de défilement
Pour appliquer des options de défilement à un cadre, il doit y avoir des objets enfants qui s'étendent au-delà de ses limites. Vous ne pouvez appliquer qu'une seule option de défilement à chaque cadre.
Ces instructions s'appliquent également aux composants. Sélectionnez l'Instance dans le canevas, cliquez sur Aller au composant principal dans la barre latérale de droite, puis ajustez les limites du Composant d'origine.
Sélectionnez le cadre dans le canevas.
Ouvrez le panneau Prototype dans la barre latérale située à droite.
Mettez à jour les options de défilement, choisissez :
Si aucun contenu ne s'étend au-delà du cadre, Figma affiche un message d'erreur lorsque vous essayez d'appliquer des options de défilement. Pour appliquer des options de défilement, vous devez ajuster les limites du cadre.
Pour ajuster les limites d'un cadre :
Sélectionnez le cadre que vous souhaitez mettre à jour.
Ouvrez le panneau Design dans la barre latérale située à droite.
Passez le curseur sur les limites du cadre dans le canevas jusqu'à ce que le curseur apparaisse.
Faites glisser la boîte englobante pour redimensionner le cadre. Maintenez la touche de modification enfoncée pour ignorer les Contraintes :
Mac : Commande ⌘
Windows : Ctrl
Si vous souhaitez masquer le contenu qui s'étend au-delà du cadre, cochez la case à côté du Contenu du clip.
Les contraintes définissent le comportement d'un objet lorsque vous le redimensionnez. Pour ignorer temporairement les Contraintes, maintenez la touche de modification enfoncée lorsque vous redimensionnez le cadre :
Mac : Commande ⌘
Windows : Ctrl
Créer des objets fixes dans un prototype
Vous pourriez ne pas vouloir déplacer certains éléments dans un prototype lorsque celui-ci défile. Par exemple : appliquez des contraintes en haut pour fixer une barre d'état en haut de l'appareil ou en bas pour fixer un menu en bas.
Vous pouvez utiliser contraintes pour fixer la position d'un objet dans un prototype de défilement. Dans la section contraintes, il existe un paramètre Fixer la position lors du défilement. Vous pouvez ainsi verrouiller la position d'un objet pour s'assurer qu'il reste au même endroit, même lors du défilement.
Remarque : Lorsque vous créez un objet fixe, Figma déplace ces calques au-dessus des autres calques de votre design. Il n'est pas possible de positionner les objets de défilement au-dessus des calques fixes.
Pour créer un objet fixe :
Sélectionnez l'objet, le groupe ou le composant dans le canevas.
Ouvrez le panneau Design dans la barre latérale située à droite.
Dans la section Contraintes, appliquez des contraintes verticales et horizontales.
Cochez la case à côté de Fixer la position lors du défilement.
Figma déplacera ces objets au-dessus de vos autres calques afin qu'ils se trouvent dans la section FIXE du panneau Calques.
Conserver la position de défilement
Lorsque nous créons des prototypes, nous voulons que nos interactions ressemblent autant que possible à la réalité. Pour certaines interactions, nous devons créer une illusion de dynamisme réel pour nos designs.
Conserver la position de défilement vous permet de conserver le même emplacement de défilement lorsque vous vous déplacez entre deux écrans. Cela s'applique à la profondeur dans un défilement vertical, ainsi qu'à l'emplacement de l'utilisateur dans un élément de défilement horizontal.
Toute personne disposant d'un accès éditeur peut créer des prototypes.
Toute personne disposant d'un accès lecteur peut lire les prototypes dans le Mode présentation.
Les fonctionnalités de prototypage de Figma vous permettent de créer des flux interactifs qui explorent la façon dont un utilisateur peut interagir avec vos designs.
Les prototypes sont un excellent moyen :
d'obtenir un aperçu des interactions et des flux utilisateur,
Astuce ! Pour un flux de travail encore plus efficace, vous pouvez basculer rapidement entre les onglets Design et Prototype à l'aide du raccourci clavier MajE.
Flux et points de départ
Avec le prototypage dans Figma, vous pouvez créer plusieurs flux pour votre prototype sur une seule page pour prévisualiser l'ensemble du parcours et de l'expérience d'un utilisateur dans vos designs.
Un flux est constitué du réseau de cadres et de connexions sur une seule page. Un prototype peut tracer l'ensemble du parcours d'un utilisateur dans votre application ou votre site Web, ou se concentrer sur un segment spécifique de celui-ci via son propre flux. Par exemple : votre prototype couvre toutes les interactions possibles sur un site de e-commerce. Dans le prototype, vous disposez de flux pour créer un compte, ajouter des articles à un panier et régler.
Figma crée un point de départ de flux lorsque vous ajoutez votre première connexion entre deux cadres. Il existe d'autres façons d'ajouter un point de départ de flux à votre prototype :
En ayant sélectionné le cadre de départ, cliquez sur la section dans le Point de départ du flux de la barre latérale droite.
Cliquez avec le bouton droit de la souris sur le cadre, puis cliquez sur Ajouter un point de départ.
Dupliquer un cadre avec un point de départ existant.
Remarque : Un cadre de premier niveau peut faire partie de plusieurs flux, mais ne peut avoir qu'un seul point de départ. Les cadres imbriqués dans un cadre de départ de premier niveau peuvent avoir des connexions qui permettent à l'utilisateur de naviguer dans plusieurs flux. Par exemple, les boutons Se connecter et S'inscrire peuvent être imbriqués dans le même cadre de point de départ, puis être connectés à des cadres dans des flux distincts pour chaque expérience.
Créer des connexions
Sélectionnez la zone interactive pour la connexion.
Cliquez sur pour créer la connexion.
Faites-le glisser vers la destination.
S'il n'y a pas de connexions existantes, Figma fera du premier cadre un point de départ.
Créez des interactions et des animations
Ouvrez l'onglet Prototype dans la barre latérale située à droite
Une zone interactive est l'endroit où l'interaction a lieu. Elle peut être n'importe quel objet dans le cadre d'origine, par exemple un lien, un bouton, une image ou une icône, etc
Les Connexions sont les flèches bleues ou « nouilles » qui relient la zone interactive à la destination. Nous appliquons les paramètres d'interaction et d'animation via la connexion.
Un flux est le réseau de cadres connectés qui forment un chemin à travers un prototype. Chaque flux possède son propre point de départ. Plusieurs flux peuvent exister dans un prototype.
Le point de départ est le premier cadre d'un flux. Définissez plusieurs points de départ pour afficher différents flux du prototype dans le mode présentation.
Le déclencheur détermine le type d'interaction avec la zone interactive susceptible de faire progresser le prototype. Il peut s'agir d'une interaction avec la souris ou une interaction tactile, par exemple un tapotement, un glisser-déplacer, un clic, un survol, etc.
La destination est l'endroit où la transition se termine. Il doit s'agir d'un cadre de premier niveau, un cadre qui est ajouté directement au canevas, et non d'un objet dans un cadre. Si nous pensons passer de A à B, A est la zone interactive et B est la destination.
L'action définit le type de progression du prototype. Par exemple, l'action peut être de naviguer vers un autre cadre ou d'ouvrir une URL externe.
Les paramètres d'animation déterminent la façon dont le prototype se déplace d'un cadre à l'autre. Vous pouvez contrôler le type d'animation, ainsi que la vitesse et la direction.
Une transition est le type d'animation. Cette option définit la manière dont l'action se déplace vers la destination.
La direction contrôle la direction d'origine de la transition. Choisissez entre gauche, droite, haut ou bas.
La durée contrôle le temps nécessaire pour terminer l'animation. Plus la durée est courte, plus la transition est rapide. Sélectionnez une durée comprise entre 1 ms et 10 000 ms (10 secondes).
L'Atténuation affecte l'accélération de l'animation, c'est-à-dire si elle démarre lentement ou rapidement. Cela vous permet de créer des animations plus naturelles.
Les Superpositions sont des cadres qui apparaissent au-dessus de l'écran ou du cadre actuel. Vous pouvez utiliser des superpositions pour créer des infobulles, des menus interactifs, des alertes ou des confirmations.
Les Options de défilement vous permettent de définir la façon dont votre prototype réagit au défilement. Cela vous permet de créer des interactions utilisateur plus avancées, par exemple des carrousels, des galeries ou des cartes interactives.
Choisissez l'appareil qui s'affiche lors de la présentation de votre prototype. Définissez l'appareil et le modèle.
La couleur de l'arrière-plan vous permet de définir la couleur à l'arrière-plan de votre prototype.
Si vous disposez d'un prototype avec cadres portrait et paysage, vous pouvez sélectionner une orientation. L'orientation est définie pour l'ensemble du prototype. Il n'est pas possible de basculer entre les modes portrait et paysage dans un prototype.
Un aperçu vous montrera l'aspect ou le fonctionnement du prototype. Nous vous proposons des aperçus des animations et des paramètres d'appareil du prototype.
Les utilisateurs disposant d'un accès pour éditer un fichier peuvent créer et modifier des prototypes.
Les utilisateurs disposant d'un accès pour voir un fichier ou un prototype peuvent voir des prototypes.
L'animation automatique recherche les calques correspondants, identifie les différences et anime intuitivement les calques entre les différents cadres d'un prototype.
Vous pouvez sélectionner l'animation automatique dans la liste des transitions, lors de l'élaboration d'un prototype. Vous pouvez également appliquer l'animation automatique à d'autres transitions pour créer des animations plus fluides.
L'animation automatique vous permet de créer rapidement des animations avancées. Utilisez l'animation automatique pour reproduire :
Des séquences de chargement
Un défilement parallaxe
Des mouvements tactiles comme par exemple déplacer, faire glisser, appuyer longuement
Des boutons curseurs, boutons à bascule et interrupteurs
Une expansion du contenu (Afficher plus / Afficher moins)
L'animation automatique cherche à connecter entre eux les mêmes calques à travers les différents cadres. Figma prend en compte le nom du calque et sa position dans la hiérarchie.
Figma identifie les éléments ayant été modifiés sur les mêmes calques entre chaque cadre et applique une transition pour les animer.
Vous pouvez utiliser l'animation automatique sur des objets entiers ou des Composants, ainsi que sur des calques individuels au sein d'un Composant ou d'un groupe.
Il est probable que plusieurs propriétés d'un objet changeront entre les Cadres. Nous avons isolé chacune des propriétés prises en charge ci-dessous ; vous saurez ainsi à quoi vous attendre.
L'échelle
Si un objet change de taille entre les cadres, Figma l'animera en le réduisant ou en le grossissant.
La position
Figma déterminera si la position d'un objet (les coordonnées X et Y) a changé. Il animera ensuite l'objet en le déplaçant de sa position actuelle à sa position dans le cadre de destination.
L'opacité
L'animation automatique peut également reconnaître l'opacité d'un calque ou d'un objet. Vous pouvez régler l'opacité pour faire apparaître ou disparaître un objet entre les cadres.
Réglez l'opacité du calque à 0 %, au lieu de rendre directement le calque invisible. Figma appliquera une transition de fondu pour animer l'opacité du calque.
Vous pouvez régler l'opacité via les propriétés de remplissage d'un calque, ainsi que via la propriété du Calque. L'animation automatique s'appliquera aux deux.
Nous vous recommandons d'ajuster l'opacité de l'ensemble du calque. Réglez le paramètre d'opacité du Calque dans l'onglet Design de la barre latérale de droite.
La rotation
L'animation automatique prend également en compte la rotation et l'orientation du calque.
Vous pouvez faire pivoter un objet à l'aide du champ de rotation dans la barre latérale droite ou dans le canevas lui-même. Passez votre curseur derrière l'angle d'un objet jusqu'à ce que le curseur de rotation apparaisse.
Faites pivoter un seul calque à la fois ou faites pivoter un groupe de calques autour d'un point d'ancrage.
Le remplissage
Figma animera automatiquement toute modification apportée au remplissage d'un objet. Cela vous permet d'animer les modifications entre les couleurs unies, les dégradés et même les remplissages d'images.
À noter
Figma ne peut appliquer l'animation automatique aux modifications d'Effets, ou à des déplacements de formes. Si une propriété n'est pas prise en charge, Figma appliquera une transition de fondu par défaut.
Figma ne peut appliquer l'animation automatique à des actions de superposition. En effet, Figma traite les superpositions comme de nouveaux cadres. Vous pouvez toutefois utiliser l'animation automatique pour permuter les superpositions, si ces dernières possèdent des calques correspondants.
Si vous insérez un nouveau calque dans le cadre de destination, l'animation automatique ajoutera celui-ci en fondu.
Si les propriétés d'un calque restent les mêmes entre deux cadres, Figma n'animera pas ce calque. Cela est idéal pour les barres d'état et les menus, ainsi que pour les interactions où vous ne souhaitez pas passer à une autre interface utilisateur.
Si vous cochez la case Position Fixe lors du Défilement de n'importe quel calque, Figma l'ajoutera à la liste des cadres fixes. L'animation automatique gère les calques différemment lorsque vous combinez l'animation automatique avec d'autres transitions.
Appliquer l'animation automatique
Il y a deux façons d'utiliser l'animation automatique dans vos prototypes. En tant que transition autonome ou en utilisant l'animation automatique des calques correspondants avec une autre animation.
Animation automatique
Sélectionnez Animation automatique dans le champ de transition pour créer une animation entre deux cadres.
Ouvrez l'onglet Prototype dans la barre latérale de droite.
Sélectionnez un calque, un groupe ou un cadre dans le canevas. Un nœud de connexion apparaît sur le bord droit.
Cliquez sur le nœud et faites-le glisser vers le cadre suivant pour créer une connexion.
Définissez l'interaction dans la barre latérale de droite en choisissant un déclencheur et une action. Figma définira le second cadre comme destination.
Dans la section Animation, sélectionnez Animation automatique dans le champ de transition.
Jouez sur l'Atténuation de la transition ou modifiez la Durée (facultatif).
Répétez l'opération pour tous les autres cadres que vous souhaitez animer automatiquement.
Dans notre exemple ci-dessous, nous avons trois cadres avec des calques correspondants. Nous souhaitons que l'animation automatique effectue la suppression de l'Abel Tasman Coast Track de notre liste de favoris.
L'animation automatique nous déplace maintenant en douceur entre les différents cadres de notre prototype.
Animation automatique des calques correspondants
Si vous souhaitez animer automatiquement certains calques de votre prototype, tout en utilisant une autre transition principale, vous pouvez cocher une case pour l'animation automatique des calques correspondants.
Figma traite les calques fixes différemment lorsque l'animation automatique est utilisée avec d'autres transitions.
Pour les calques qui ne correspondent pas : Figma utilisera la transition principale que vous avez sélectionnée.
Pour les calques qui correspondent : Figma appliquera l'Animation automatique à toutes les différences dont les propriétés sont prises en charge.
Pour les calques fixes qui correspondent : Figma n'appliquera aucune transition.
Pour les calques fixes qui ne correspondent pas : Figma appliquera une transition de fondu au lieu de la transition que vous avez sélectionnée.
Afin d'utiliser l'Animation automatique des calques correspondants, cochez la case dans la barre latérale de droite lors du réglage de l'animation :
Dans notre exemple ci-dessous, les barres d'état et de navigation sont présentes dans les trois cadres. Nous souhaitons qu'elles restent en place lorsque nous basculons entre les onglets.
Nous avons sélectionné la transition Pousser pour se déplacer entre les cadres. Nous choisissons de ne pas cocher la case activant l'Animation automatique des calques correspondants.
Sur notre prototype, nous pouvons voir que tout ce qui se trouve dans notre cadre de destination utilise la transition Pousser. Il est donc assez évident que nous nous déplaçons d'un écran à l'autre dans un prototype.
Si nous cochons la case activant l'Animation automatique des calques correspondants, nos barres d'état et de navigation restent en place, alors que le reste du contenu utilise Pousser.
Astuces concernant l'Animation automatique
Avant l'animation automatique, Figma n'accordait que peu d'importance aux noms de calques. Comme l'Animation automatique repose sur le Nom de calque et la Hiérarchie, il vous faudra peut-être adopter une approche différente.
Vous trouverez ci-dessous quelques pistes pour mieux comprendre certains résultats inattendus de l'animation automatique.
Astuce ! Nous vous recommandons d'augmenter la durée lors de la construction de votre prototype. Cela vous permettra de mieux voir comment cela se déroule avant d'effectuer des ajustements.
Noms de calque
Une façon de créer rapidement des cadres pour l'animation automatique est de les dupliquer. Cela permet de conserver la cohérence des noms entre chaque cadre. Vous pourrez ensuite ajouter et supprimer des calques à chaque cadre, si nécessaire.
Figma nomme les cadres et les calques en fonction de la façon dont vous les dupliquez ou les copiez-collez.
Au sein d'un cadre : Figma numérote les calques de manière consécutive. Par exemple : Cadre 1, Cadre 2, etc.
Entre les calques : Figma utilise le même nom. Par exemple : Si vous copiez Rectangle 1 à partir d'un cadre, Figma le colle en tant que Rectangle 1 dans le cadre suivant.
Vous pouvez avoir de mêmes objets ou calques que l'on retrouve dans divers cadres, mais avec un nom différent dans chacun d'eux. Ou bien l'inverse : des calques qui ont tous le même nom mais que vous ne voulez pas faire correspondre.
Figma facilite également l'identification des calques ou objets qui se retrouvent dans différents cadres. Cela s'applique à tous les calques, groupes, cadres et Composants.
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 va mettre en surbrillance ce calque dans tous les autres cadres où il se trouve.
Ordre et hiérarchie des calques
L'Animation automatique et l'Animation automatique des calques correspondants prennent en compte l'ordre des calques, autrement dit la hiérarchie de vos calques.
Normalement, Recouvrir ou Glisser dans déplacera l'ensemble du cadre de destination au-dessus du cadre d'origine. Avec l'animation automatique des calques correspondants, Figma va recouvrir des calques ou les faire glisser en fonction de leur hiérarchie, ce qui peut entraîner des résultats assez inattendus.
Dans la capture d'écran ci-dessous, nous avons deux objets correspondants entre nos cadres (Explorer 1 et Explorer 2). Il s'agit de la barre d'état et de la barre de navigation.
Si des calques se trouvent au-dessus d'un calque correspondant, Figma les animera au-dessus du cadre de destination. Dans la capture d'écran ci-dessous, nous pouvons voir les calques de Explorer 1 s'afficher au-dessus du cadre de destination.
En déplaçant nos calques correspondants vers le haut de la hiérarchie, nous nous assurons que l'ensemble des cadres de destination glisseront au-dessus du cadre d'origine.
Grouper les calques
Pour être plus précis dans le choix de l'animation automatique, Figma fait correspondre les calques en fonction de leur nom et de leur hiérarchie. Cela vous permet également d'annuler rapidement la correspondance des calques entre les cadres.
Par exemple, nous avons cinq rectangles dans chacun de nos cadres. Ces rectangles possèdent un contenu différent pour chaque cadre. Nous les avons nommés Voyage 1 à Voyage 5 dans les trois cadres.
Lorsque nous essayons d'appliquer une transition Pousser, l'animation automatique les identifie comme des calques correspondants. Au lieu de traiter ces rectangles comme un nouveau contenu, Figma anime automatiquement leur changement de position.
Pour modifier ce comportement, nous pouvons regrouper les rectangles Voyages dans chaque cadre et leur donner un nom unique.
Lors de la prévisualisation de notre transition, l'animation automatique ne reconnaît plus ces éléments comme des calques correspondants. La fonction Pousser sera utilisée sur l'ensemble de notre contenu, rendant ainsi notre prototype beaucoup plus réaliste.
Animation automatique avec Glisser dans et Recouvrir
Quelques points sont à prendre en compte lors de l'utilisation de l'animation automatique des calques correspondants avec des transitions Glisser dans ou Recouvrir.
Lorsque cette option est sélectionnée, Figma animera les calques correspondants entre les cadres. Cela signifie que Figma ne pourra pas animer la totalité du cadre de destination (B) sur le cadre initial (A), comme d'habitude.
Figma n'incluera pas non plus le remplissage d'un cadre dans l'animation, car les cadres pourraient se chevaucher, rendant alors la transition confuse.
Pour éviter cela, il est possible d'ajouter un rectangle avec un remplissage uni derrière nos autres calques. Maintenant dans notre prototype, les contenus des cadres glissent ensemble.
