Related Videos

• Guide de prototypage dans Figma

  Avant de commencer

  Qui peut utiliser cette fonctionnalité

  S'applique à toutes les équipes ou forfaits.

  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,
  • de partager et itérer des idées,
  • d'obtenir les commentaires des collaborateurs,
  • de tester les interactions avec les utilisateurs,
  • de présenter vos designs aux parties prenantes.

  Regardez notre vidéo sur le prototypage ci-dessous. Vous pouvez également consulter notre Playlist concernant la collaboration et le prototypage sur Youtube.

  Astuce ! Pour un flux de travail encore plus efficace, vous pouvez basculer rapidement entre les onglets Design et Prototype  à l'aide du raccourci clavier Maj E.

  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.

  Lorsqu'il est temps de tester vos designs, vous pouvez partager l'intégralité du prototype ou copier le lien vers un point de départ du flux.

  Pour en savoir plus sur les points de départ et les flux →

  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

  1. Sélectionnez la zone interactive pour la connexion.
  2. Cliquez sur pour créer la connexion.
  3. Faites-le glisser vers la destination.
  4. S'il n'y a pas de connexions existantes, Figma fera du premier cadre un point de départ.

  

  Astuce ! Vous pouvez créer des connexions à partir de plusieurs objets vers le même cadre de destination en même temps, ce qui vous permet d'économiser du temps et de l'énergie lors de l'élaboration de vos flux de prototypes. Pour ce faire, sélectionnez plusieurs zones interactives de départ sur votre canevas, puis cliquez sur l'icône et faites-la glisser vers la destination.

  En savoir plus sur la création et la modification des connexions groupées →

  Créez des interactions et des animations

  1. Ouvrez l'onglet Prototype dans la barre latérale située à droite
  2. Ajoutez des interactions
  3. Définissez les détails de l'interaction
  4. Appliquez une animation
  5. Visualisez l'Aperçu de votre animation

  

  Régler les paramètres du prototype

  1. Sélectionnez un Appareil et un Modèle
  2. Visualisez l'Aperçu de votre prototype
  3. Sélectionnez la couleur de l'Arrière-plan
  4. Définissez le cadre de départ du prototype

  

  En savoir plus sur le prototypage

  Lancez-vous

  • Créez les interactions et l'animation du prototypes
  • Sélectionnez un point de départ pour votre prototype
  • Personnalisez votre appareil de prototype
  • Actions, déclencheurs et animations du prototype

  Interactions avancées

  • Créer des superpositions dans vos prototypes
  • Créez des animations avancées avec l'Animation automatique
  • Interactions de défilement du prototype avec options de défilement
  • Ajouter une vidéo à des prototypes
  • Ajouter des GIF animés à des prototypes

  Partager et collaborer

  • Afficher les connexions de prototype
  • Définir les options du mode présentation du prototype
  • Partager votre prototype
  • Afficher les prototypes sur un appareil mobile
  • Faire des commentaires sur des prototypes

  Glossaire

  • 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.
• Défilement du prototype et options de défilement

  Avant de commencer

  Qui peut utiliser cette fonctionnalité

  Les utilisateurs de toutes les équipes ou tous les forfaits peuvent utiliser le défilement dans leurs prototypes.

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

  Les options de défilement définissent le fonctionnement du défilement dans les prototypes. Ces options comprennent le débordement de défilement et la position de défilement.

  • Le débordement de défilement définit les possibilités d'interaction dont disposent les utilisateurs avec le contenu s'étendant au-delà des dimensions d'un cadre.
  • La position de défilement spécifie la manière dont les calques réagissent sur le cadre lorsque les utilisateurs les font défiler.

  Utilisez les options de défilement pour créer des prototypes capables de reproduire les expériences utilisateur interactives.

  • Faire défiler une longue page de contenu vers le haut ou vers le bas
  • Faire défiler de gauche à droite pour afficher différents éléments dans un curseur
  • Effectuer un panoramique ou un défilement dans n'importe quelle direction, comme sur une carte interactive
  • Figer des objets tels que des barres de navigation et des menus pour qu'ils conservent la même position sur la page pendant le défilement
  • Créer des « objets persistants » qui restent en haut du cadre lorsque vous les faites défiler

  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.

  L'option Conserver la position de défilement vous permet de conserver l'emplacement du défilement lorsque vous passez d'un écran à l'autre. Ce fonctionnement s'applique à la profondeur de défilement d'un défilement vertical, ainsi qu'à la position de l'utilisateur sur un élément de défilement horizontal.

  Pour en savoir plus sur la conservation de la position de défilement →

  Débordement de défilement

  Options de défilement

  Vous pouvez uniquement appliquer les options de défilement aux cadres. Ce fonctionnement s'applique aux cadres qui se trouvent directement sur des canevas (cadres de niveau supérieur), ainsi qu'aux 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 4 options de défilement distinctes : Aucun défilement, Vertical, Horizontal et Dans les deux sens.

  Aucun défilement Vertical Horizontal Dans les deux sens

  L'option « Aucun défilement » empêche les utilisateurs de défiler vers le haut et vers le bas au sein d'un cadre. Lorsqu'elle est définie, le contenu qui s'étend au-delà des limites du cadre ne s'affiche pas.

  Le défilement vertical permet aux utilisateurs de faire glisser ou de faire défiler vers le haut et vers le bas au sein d'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.

  

  Le défilement horizontal permet aux utilisateurs de faire glisser ou de faire défiler vers la gauche et vers la droite au sein d'un cadre, tout en conservant leur position verticale. Utilisez cette option pour créer des curseurs pour le contenu, comme des produits, des galeries et des bibliothèques.

  

  Le défilement horizontal et vertical permet aux utilisateurs de naviguer dans n'importe quelle direction dans un cadre : 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, des objets enfants doivent s'étendre 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.

  1. Sélectionnez le cadre dans le canevas.
  2. Ouvrez le panneau Prototype dans la barre latérale située à droite.
  3. Dans la section Options de défilement, sélectionnez le menu déroulant Débordement. Vous avez le choix entre les options suivantes :
     • Aucun défilement
     • Horizontal
     • Vertical
     • Dans les deux sens
  4. Cliquez sur l'icône présente pour visualiser le prototype dans le mode présentation et voir les résultats.

  

  Ajuster les limites d'un cadre

  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.

  1. Sélectionnez le cadre que vous souhaitez mettre à jour.
  2. Ouvrez le Panneau de design dans la barre latérale située à droite.
  3. Passez le curseur sur les limites du cadre dans le canevas jusqu'à ce que le curseur apparaisse.
  4. Faites défiler la boîte englobante pour redimensionner le cadre.
  5. Si vous souhaitez masquer le contenu qui s'étend au-delà du cadre, cochez la case en regard de l'option Cacher le contenu extérieur.

  

  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

  Position de défilement

  Vous pouvez appliquer l'option « Position de défilement » à n'importe quel calque au sein d'un cadre. Tous les objets d'un cadre peuvent se voir attribuer une position de défilement donnée.

  Figma prend en charge trois types de positions de défilement : Défilement avec l'élément parent, Fixe et Collant.

  Positions

  Défilement avec l'élément parent Fixe Collant

  Les objets qui défilent avec l'élément parent se déplacent vers le haut et vers le bas dans le cadre lors du défilement. Utilisez cette option pour imiter le comportement d'un défilement vers le haut ou vers le bas de pages de contenu plus longues.

  

  Les objets fixes restent statiques, même pendant le défilement vers le haut et vers le bas. Cette option vous permet de verrouiller la position d'un objet, afin qu'il reste à sa place. Utilisez des calques fixes pour ancrer une barre d'état au sommet de l'appareil, ou pour ancrer un menu au bas d'un cadre.

  Vous ne pouvez pas attribuer une position de défilement fixe à un objet d'un cadre avec disposition automatique.

  

  Lorsque vous créez un objet fixe, Figma déplace les calques correspondants au-dessus des autres calques de votre design et les identifie comme Fixes dans votre panneau des calques. Il est impossible de placer des objets de défilement au-dessus des calques fixes.

  

  Les objets persistants commencent comme un défilement dans le cadre parent, puis deviennent fixes lorsque le bord supérieur de l'objet atteint le sommet du cadre. (Si vous faites à nouveau défiler vers le haut, l'objet se décolle et se déplace vers le bas dans le cadre parent.)

  Astuce : Découvrez le fichier d'initiation au défilement collant via la Communauté Figma → 

  Vous pouvez utiliser la position de défilement collant pour concevoir des menus de navigation ou des en-têtes en collision.

  Les objets persistants s'appliquent uniquement au défilement vertical. Pour appliquer une position de défilement collant à un objet, l'option de défilement du cadre parent de l'objet doit être définie sur « Vertical ». Vous ne pouvez pas ancrer un objet au bas, à gauche ou à droite d'un cadre.

  

  Remarque : Consultez le panneau des calques pour savoir comment les objets persistants s'empileront dans votre prototype. Les calques se trouvant sous des objets persistants défileront derrière eux, tandis que les calques se trouvant au-dessus des objets persistants défileront devant eux.

  Appliquer une position de défilement à un calque

  Les positions de défilement s'appliquent aux calques individuels d'un cadre. Vous pouvez appliquer une seule position de défilement à chaque objet.

  1. Sélectionnez l'objet, le groupe ou le composant dans le canevas.
  2. Ouvrez le panneau des prototypes dans la barre latérale de droite.
  3. Dans la section Options de défilement, sélectionnez le menu déroulant Position. Vous avez le choix entre les options suivantes :
     • Défilement avec l'élément parent
     • Fixe
     • Collant
  4. Cliquez sur la présente icône pour afficher le prototype dans le mode présentation et consulter les résultats.
• Créer des animations avancées avec l'animation automatique

  Avant de commencer

  Qui peut utiliser cette fonctionnalité

  Les utilisateurs de toutes les équipes ou forfaits

  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)
  • Tirer pour réactualiser

  

  Découvrez comment nous avons développé l'animation automatique dans notre blog : Annonce de l'animation automatique.

  Propriétés prises en charge

  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.

  1. Ouvrez l'onglet Prototype dans la barre latérale de droite.
  2. Sélectionnez un calque, un groupe ou un cadre dans le canevas. Un nœud de connexion apparaît sur le bord droit.
  3. Cliquez sur le nœud et faites-le glisser vers le cadre suivant pour créer une connexion.
  4. 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.
  5. Dans la section Animation, sélectionnez Animation automatique dans le champ de transition.
  6. Jouez sur l'Atténuation de la transition ou modifiez la Durée (facultatif).
  7. Répétez l'opération pour tous les autres cadres que vous souhaitez animer automatiquement.
  8. Cliquez sur dans la barre d'outils pour ouvrir le mode présentation du prototype.

  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.

  Vous pouvez afficher et mettre à jour vos noms de calques à l'aide du Panneau des calques dans la barre latérale gauche. Découvrez comment renommer plusieurs calques.

  Afficher les calques correspondants

  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.

  1. Ouvrez l'onglet Prototype dans la barre latérale de droite.
  2. Passez le curseur de la souris sur un objet ou un calque dans le canevas.
  3. 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.