Qui peut utiliser cette fonctionnalité

S'applique à toute équipe ou tout forfait.

Toute personne disposant d'un accès de type peut éditer a la possibilité de créer des composants interactifs.

Toute personne disposant d'un accès de type peut éditer au fichier a la possibilité de publier des composants dans une bibliothèque.

Vous découvrez le prototypage ? Consultez notre Guide de prototypage dans Figma →

Grâce aux composants interactifs, vous pouvez créer des interactions de prototypes entre des variantes d'un ensemble de composants. Dès lors que vous ajoutez une instance à vos designs, ces interactions sont configurées et immédiatement opérationnelles. Cela vous fait gagner du temps pour la création de prototypes, tout en évitant les sacs de nœuds.

• Créez des éléments interactifs qui basculent automatiquement d'une variante à l'autre, tels que les boutons qui passent d'un état de survol à une action de pression.
• Définissez des interactions par défaut au niveau d'un composant et supprimez les approximations du processus de conception de prototypes.
• Réduisez le nombre de frames et de connexions nécessaires au prototypage de champs de saisie, comme un ensemble de cases à cocher ou de boutons à bascule.

Avant les interactions de variante

Dans l'exemple ci-dessous, nous avons ajouté toutes les connexions possibles pour prototyper une frame comportant cinq cases à cocher. Sans les composants interactifs, nous devrions dupliquer 32  fois la même frame et créer 160 connexions entre eux afin de prototyper chaque combinaison possible.

Avec les interactions de variante

Avec les composants interactifs, il suffit d'ajouter une instance de la case à cocher à un design pour que ses interactions de variante soient opérationnelles. Lorsque nous examinons le prototype, Figma bascule automatiquement entre les variantes cochées et non cochées.

Créer des composants interactifs

Vous pouvez uniquement créer des composants interactifs à l'aide de variables provenant du même ensemble de composants. Si vous ne disposez d'aucun ensemble de composants, vous devez en créer un. Découvrir comment créer des variantes →

Créer des interactions de variante

Les composants interactifs s'accompagnent d'une nouvelle action applicable aux prototypes : Changer en.

1. Sélectionnez la variante de départ de l'interaction dans l'ensemble de composants.
2. Accédez à l'onglet Prototype de la barre latérale droite.
3. Cliquez sur l'icône située à droite de la zone de délimitation de la frame et faites-la glisser jusqu'à la variante de destination. Vous pouvez également cliquer sur l'icône dans la section Interactions du Panneau de prototypage, définir l'action sur Changer en, et enfin sélectionner la variante de destination dans le menu déroulant.
4. Une fois la connexion établie, utilisez le panneau Interaction details pour paramétrer le déclencheur et l'action.

Vous pouvez également utiliser l'action Changer en sur une instance imbriquée pour modifier la variante du composant parent. Dans l'exemple ci-dessous, une variante issue de l'ensemble de composants Afficher les détails est imbriquée dans un autre ensemble de composants de containeur. Une interaction de type Changer en est placée sur l'instance imbriquée afin de faire basculer le composant parent entre sa variante réduite et sa variante développée.

Utiliser les composants interactifs

Vous pouvez ajouter des instances de composants interactifs à vos designs comme n'importe quel autre composant. La seule différence réside dans le fait que des interactions ont déjà été appliquées à ces instances à des fins de prototypage.

Pour utiliser des composants interactifs :

1. Ajoutez une instance d'un composant interactif à une frame de votre design.
2. Lorsque vous êtes prêt à créer un prototype de votre design, accédez à l'onglet Prototype de la barre latérale droite.
3. Concevez votre prototype.
4. Prévisualisez les designs et les interactions dans le mode présentation.

Ajouter d'autres interactions

Lorsque vous concevez un prototype intégrant des composants interactifs, vous pouvez ajouter des interactions classiques en plus des interactions de variante.

Dans l'exemple ci-dessous, nous avons ajouté une interaction basée sur un déclencheur par clic en plus de l'interaction de variante avec un délai.

L'ordre des interactions dépendra de l'utilisation ou non de déclencheurs identiques à ceux des interactions de variante. En savoir plus sur les déclencheurs de prototype →

Déclencheurs identiques

Lorsque les deux interactions utilisent le même déclencheur, Figma utilise l'interaction du prototype et ignore l'interaction de la variante.

Par exemple :

1. Un bouton à bascule présente une interaction de variante Au clic → Changer en entre les variantes Activé et Désactivé de son ensemble de composants.
2. Vous ajoutez une interaction Au clic → Accéder à entre le bouton à bascule et une autre frame.

Lorsque l'utilisateur clique sur le bouton à bascule, Figma accède à la frame suivante.

Autres déclencheurs

Lorsque vous ajoutez une interaction avec un autre déclencheur, Figma lit à la fois cette interaction et les interactions de variante.

Par exemple :

1. Un bouton présente une interaction de variante Au survol → Changer en entre les variantes par défaut et survol.
2. Pendant la conception de votre prototype, vous ajoutez l'interaction Au clic → Accédez à.

Figma applique l'action Changer en sur la variante survol pour la définir sur survol, puis l'action Accéder à pour définir la frame suivante sur Au clic.

Afficher les interactions

Lorsque vous utilisez des composants interactifs, des sections Interactions et Variant interactions s'affichent pour les interactions et les interactions de variante, respectivement, dans l'onglet Prototype de la barre latérale droite.

• Utiliser la section Interactions pour créer des animations et des interactions de prototypes
• Utiliser la section des interactions de variante, Variant interactions, pour afficher les détails d'une interaction de variante

Modifier les interactions de variante

Vous pouvez remplacer une interaction de variante pour une instance de votre prototype. Si vous souhaitez modifier une interaction de variante pour le composant principal, vous devez le faire depuis le fichier source.

Pour accéder à un ensemble de composants à partir d'une instance et apporter vos modifications :

1. Sélectionnez l'instance.
2. Cliquez sur l'icône dans la section Instance de la barre latérale droite.
3. Sélectionnez Go to main component.
4. Accédez à l'onglet Prototype de la barre latérale droite.
5. Apportez vos modifications aux interactions de variante.

Gestion des états entre les frames

Vos prototypes sont susceptibles d'impliquer des interactions entre plusieurs frames. Par défaut, Figma utilise les commandes de gestion des états pour déterminer le fonctionnement des composants interactifs entre les frames.

• Mémorisation des états : Figma mémorise la dernière variante définie de votre composant interactif.

  Par exemple, si vous configurez un composant interactif de case à cocher sur la variante cochée, Figma se souviendra de l'état de cette variante. De ce fait, si vous quittez cette frame et que vous y revenez plus tard, le composant interactif restera à l'état coché.

• Partage des états : Figma partage les états entre les composants interactifs correspondants. Les états sont uniquement partagés après la première interaction avec le composant.

  Par exemple, un composant interactif peut être utilisé pour une case à cocher, avec une instance de ce composant sur chacune des deux frames. Si vous définissez le composant interactif sur la variante cochée pour le première frame, puis que vous accédez à la deuxième frame, le composant correspondant à la seconde frame sera également défini sur la variante cochée.

Si vous ne souhaitez pas que les états soient conservés d'une frame à l'autre, décochez l'option Reset component state dans le panneau Interaction details de l'interaction du prototype.

En savoir plus sur la gestion des états des prototypes →

Utilisation avec des variables

Appliquez des variables à des composants interactifs pour décupler leurs possibilités.

Lorsque vous cliquez sur un composant interactif auquel une variable a été appliquée :

• la variante se met à jour ;
• la variable se met à jour, ce qui met également à jour tout autre élément lié à cette même variable.

En savoir plus sur l'utilisation de variables avec des composants interactifs →

Composants interactifs comportant des polices personnalisées

Lorsque vous utilisez des polices personnalisées pour du texte à l'intérieur de composants interactifs, gardez à l'esprit que ces polices personnalisées ne seront peut-être pas installées sur les appareils des spectateurs du prototype. Dans ce cas, Figma utilise des informations en cache à propos des variantes des composants interactifs afin d'afficher correctement les polices personnalisées durant la présentation d'un prototype. Toutefois, lorsque nous ne pouvons pas à la fois conserver les remplacements de texte et modifier les paramètres de police pour une interaction, il se peut que nous remplacions une police par Inter.

Imaginons, par exemple, qu'une personne en train de visionner votre prototype ne dispose pas de la police personnalisée utilisée sur son appareil. Si une instance d'un composant interactif contient des remplacements de texte :

• Figma remplacera peut-être la police personnalisée par Inter si le changement de variante implique la modification d'un paramètre de police, comme l'épaisseur de la police ou le soulignage.
• Si la modification appliquée à la variante n'est pas liée aux paramètres de police, comme la couleur d'arrière-plan d'un bouton, Figma affiche la police appropriée.

Nous vous recommandons d'utiliser les polices Google pour les prototypes que vous partagez avec des spectateurs qui n'ont peut-être pas accès aux polices personnalisées incluses à vos designs. Si votre équipe dispose du forfait Organisation ou Entreprise, vous pouvez vous assurer que les spectateurs du prototype ont accès aux polices personnalisées en les chargeant en tant que polices partagées.