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 :
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 :
Ensuite vous pourrez modifier le composant qui a été dupliqué et pouvez aussi modifier le nom de la propriété ainsi que la description
Création de l'animation
Pour créer l'animation il vous suffit de cliquer sur "prototype" :
Puis de cliquer sur votre première variante et faire un lien vers l'autre 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 de design avec interactive component
Rejoindre la communauté de graphistes
Rejoins notre communauté de graphistes pour progresser et t'améliorer