Les "interactive components" sur Figma

Apprennez à utiliser les interactive components sur Figma !

Les "interactive components" sur Figma

Apprennez à utiliser les interactive components sur Figma !

Crée le 16 juil. 2021

Qu'est ce qu'un "interactive component" ?

Figma propose en bêta la fonction "interactive component". Les interactive components servent à faire des animations indépendantes du défilement de la page, cette option peut aussi être utilisée pour "alléger" l'espace de travail.


Création d'un composant

Premièrement nous allons apprendre à créer un interactive component, pour cela il vous suffit de créer par exemple un bouton : Bouton

Après la création de ce bouton il suffit de créer un groupe avec le raccourci Ctrl + G puis de créer un composant avec le raccourci Ctrl + Alt + K. Votre composant est maintenant créé.

Création d'une variante

Après avoir créé votre composant vous pouvez aussi créer une variante. Pour créer cette variante, sélectionnez votre composant et ajoutez dans l'interface à votre droite : Zone sur Figma

Ensuite vous pourrez modifier le composant qui a été dupliqué et pouvez aussi modifier le nom de la propriété ainsi que la description Variante de bouton

Création de l'animation

Pour créer l'animation il vous suffit de cliquer sur "prototype" : Prototype

Puis de cliquer sur votre première variante et faire un lien vers l'autre variante Lien vers seconde variante

Et de faire de même pour l'autre variante, ainsi vous aurez un bouton que vous pouvez placer où vous voulez, déjà animé et vous permettant de gagner beaucoup de temps sur votre travail

Exemple de design sans interactive component

Exemple sans interactive component

Exemple de design avec interactive component

Exemple avec interactive component

Si vous avez des questions, rejoingnez moi sur le Discord de GCA !

Envie de lire la suite de ce tutoriel ?

Connecte-toi dès maintenant, et accède entièrement à tous les tutoriels de GCA !

#UI Design

#Graphisme

#Figma

Écrit par fiseliss –VCC#0010

1

Sommaire