Qui peut utiliser cette fonctionnalité

S'applique à toutes les équipes ou tous les forfaits.

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

Toute personne disposant d'un accès de type peut éditer au niveau du fichier peut 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 complications.

• Créez des éléments interactifs qui basculent automatiquement d'une variante à l'autre, tels que les boutons passant 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 créer le prototype d'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 elles afin de créer un prototype de 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. Accédez à l'onglet Prototype de la barre latérale droite.
2. Cliquez sur le signe sur la frame du cadre de délimitation et faites-le glisser vers la variante de destination. Vous pouvez également cliquer sur le signe dans la section Interactions du panneau Prototype, définir l'action sur Changer en, puis sélectionner la variante de destination en utilisant le menu déroulant.
3. Une fois la connexion établie, utilisez le panneau Interaction pour paramétrer le déclencheur et l'action.

Vous pouvez également utiliser l'action Changer en sur une instance imbriquée pour changer la variante du composant parent. Dans l'exemple ci-dessous, une variante d'un ensemble de composants est imbriquée dans un autre ensemble de composants Extensible. Une interaction Changer en est placée sur l'instance imbriquée pour redéfinir le composant parent de sa variante Rétractée sur sa variante Déployée.

Utiliser des 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 avec un déclencheur au survol en plus de l'interaction de variante déclenchée par un clic.

L'ordre des interactions dépend 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éder à.

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 Interactions de variante s'affichent pour les interactions et les interactions de variante, respectivement, dans l'onglet Prototype de la barre latérale droite.

• Utilisez la section Interactions pour créer des animations et des interactions de prototype.
• Utilisez la section des interactions de variante, Interactions de variante, 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. En mode de design, sélectionnez l'instance.
2. En haut de la barre latérale droite, cliquez sur .
3. Sélectionnez Accéder au composant principal.
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 souvient de l'état de cette variante. De ce fait, si vous quittez cette frame et y revenez plus tard, le composant interactif reste à 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 la première frame, puis accédez à la deuxième frame, le composant correspondant à la seconde frame est é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 Réinitialiser l'état du composant dans le panneau Détails de l'interaction 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 :

• Il se peut que Figma remplace 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 recommandons d'utiliser des polices Google pour les prototypes partagés avec des spectateurs n'ayant pas nécessairement accès à des polices personnalisées dans vos designs. Si votre équipe dispose du forfait Organisation ou Entreprise, vous pouvez vous assurer que les aperçus du prototype ont accès aux polices personnalisées en les téléchargeant comme polices partagées.