Fermer

juillet 22, 2021

Une introduction aux composants interactifs Figma —


Résumé rapide ↬

Dans cet article, Emiliano explique pourquoi Figma Interactive Components (maintenant en version bêta) améliorera la façon dont nous créons des prototypes. La nouvelle fonctionnalité réduit le temps et les efforts nécessaires pour créer des interactions en réduisant le coût de l'exploration de la conception. Vous n'avez pas besoin de connaissances et d'expérience préalables de Figma – tout ce dont vous aurez besoin est un compte Figma gratuit si vous souhaitez l'essayer par vous-même.

Récemment, Figma a déployé la version bêta de la dernière fonctionnalité de composants interactifs qui permet de définir des interactions et des animations directement dans les variantes et de les propager à chaque instance de composant. Cela signifie qu'il est désormais possible de créer un composant avec des états (survol, actif, cliqué, focus) et de le rendre interactif afin que chaque copie du composant hérite de ces mêmes interactions par défaut, ce qui aide beaucoup dans la phase de prototypage.[19659003]Voici un exemple comparatif de la façon dont le flux de travail va changer :

Quatre appareils connectés avec huit flèches montrant que huit interactions différentes étaient nécessaires pour créer un simple effet off et on.

Quatre écrans et huit interactions différentes. ( Grand aperçu)

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut quatre écrans et huit interactions pour que le prototype fonctionne comme un produit réel. Et si je voulais utiliser trois commutateurs, je devrais ajouter encore plus d'écrans et d'interactions.

Dans l'exemple suivant, il ne nécessite qu'un écran et un composant avec deux variantes pour les interactions, et le commutateur est le même donc il peut être dupliqué autant de fois que nécessaire :

 Il y a un iPhone à gauche et un groupe de deux variantes à droite, les variantes sont reliées par deux flèches pour montrer qu'un seul composant est nécessaire pour reproduire le même et en vigueur comme avant.

Un seul composant interactif utilisé deux fois à l'intérieur d'un écran. ( Grand aperçu)

L'utilisation de composants interactifs simplifie non seulement le prototype final, mais également la logique qui le sous-tend, ce qui facilite l'apprentissage de la construction, de la maintenance et de la mise à jour des prototypes.

Maintenant, avant de commencer :[19659012]Interactive Components (Beta Access)

Vous devez vous inscrire au programme Interactive Components Beta pour commencer à expérimenter cette nouvelle fonctionnalité car elle n'est pas encore disponible dans la version stable actuelle. Rejoindre la bêta est gratuit et une fois que vous avez soumis le formulaire, cela ne devrait pas prendre plus de deux ou trois jours avant de voir les composants interactifs apparaître dans votre outil de conception Figma.

Freebie

J'ai créé un fichier de conception Figma avec le exemples de cet article. Une fois que vous avez rejoint la bêta, vous pouvez dupliquer mon design et suivre plus facilement.

Avant de commencer

Il est nécessaire de comprendre certains éléments clés de Figma que nous allons utiliser, si vous les connaissez déjà, vous pouvez ignorez cette partie et commencez directement par le premier didacticiel (section : « Créez votre premier composant interactif »).

Composants

Considérez-les comme des éléments qui, lorsqu'ils sont dupliqués, créent une connexion avec sa copie (appelée instance) et lorsque le composant est modifié, l'instance reçoit les mêmes modifications. Vous pouvez également appliquer des remplacements aux instances (qui sont essentiellement des changements de style aux propriétés du composant qui permettent une certaine personnalisation).

Variantes

Ce sont les différents styles qu'un composant peut avoir et sont généralement utilisés pour appliquer différentes propriétés telles que taille ou états.

Panneau Détails de l'interaction

Il est important de comprendre le panneau Détails de l'interaction car il nous permet de définir les différentes interactions et animations pour nos composants interactifs. Figma a beaucoup d'informations sur leur site, j'inclurai donc des liens pour ceux d'entre vous qui souhaitent approfondir.

 Le panneau des détails de l'interaction de Figma avec des notes pour identifier les déclencheurs, les actions, la destination et les animations.

Détails de l'interaction. panneau (annoté). ( Grand aperçu)

Hotspot

Même si ce n'est pas à l'intérieur du panneau, le hotspot est l'élément où l'interaction se produira, dans notre cas, chaque variante sera un hotspot interactif pour lequel vous pouvez définir des déclencheurs et des actions.

Déclencheurs

Ceux-ci sont connus en développement sous le nom d'Événements et sont les différentes manières dont l'utilisateur peut activer une interaction.

Actions

Dans ce paramètre, vous pouvez définir ce qui se passera lorsque l'interaction est activé; pour les composants interactifs, nous utiliserons Change To qui permet d'échanger les variantes à l'intérieur d'un composant.

  • Change To,
  • Navigate To,
  • Open Overlay,
  • Scroll To,[19659035]Échanger avec (superposition),
  • Retour,
  • Fermer la superposition,
  • Ouvrir l'URL.

Destination

C'est la cible finale de l'action. Dans mes exemples, j'utiliserai une variante comme destination pour l'échanger de Switch OFF à Switch ON.

Animations

Figma est livré avec un ensemble de transitions prédéfinies qui peuvent être utiles dans certains cas (emménager, push, slide-in) mais je préfère toujours utiliser Smart Animate et définir mes propres transitions car c'est vraiment facile à utiliser – il vérifie essentiellement les noms des calques et s'il y a des changements entre l'image sélectionnée et le cadre de destination, il animera ces calques.

Easing

Easing fait référence à la façon dont l'animation se déplace, c'est essentiellement la façon dont l'élément accélère et décélère. Je vais utiliser deux paramètres pour ce tutoriel : Ease In and Out pour le commutateur et Linear pour les boucles, mais gardez à l'esprit qu'il est également possible de définir un paramètre personnalisé l'assouplissement, vous voudrez peut-être en savoir plus sur Easing.

En savoir plus après le saut ! Continuez à lire ci-dessous ↓

Création de votre premier composant interactif

Maintenant que vous disposez de toutes les informations, vous pouvez commencer à créer votre premier composant interactif. Je vais vous montrer un cas très courant en créant un simple commutateur qui a deux états (Off et On) et utiliser les variantes pour reproduire ces états.

Un composant de commutateur qui est activé par le pointeur.
Nous Je vais commencer par créer un simple commutateur.

Créer un composant

La première étape consiste à créer un composant.

  • À l'aide de l'outil Rectangle (R), créez un rectangle gris (# A7A9BC) 56x32 pixels et appliquez un rayon d'angle de 16 px.
  • À l'aide de l'outil Ellipse (O), créez un cercle blanc (#FFF) 24x24 pixels et placez-le sur le rectangle dans la partie gauche, en laissant 4 px d'espacement. Voici à quoi cela devrait ressembler :

Un simple composant de commutation à l'état éteint.

Le composant de commutation. ( Grand aperçu)
  • Combinez ces deux éléments en un seul composant en utilisant Ctrl/Cmd + Alt + K (ou en utilisant l'icône Composant de la barre supérieure de Figma) :

L'icône du composant Figma, elle est composée de quatre carrés tournés à 45 degrés.

L'icône du composant dans la barre supérieure. ( Grand aperçu)

Remarque : Ici et ailleurs, j'utiliserai la notation de touche universelle Windows/Mac, où la touche Ctrl de Windows correspond à la Cmd clé sur le Mac; Alt dans Windows est l'équivalent de Alt/Option sur Mac, donc j'utiliserai Alt pour faire court, et Shift est le même sur les deux plates-formes.

Ajouter une variante

  • Sélectionnez le composant que vous venez de créer et, dans le panneau de droite (dans l'onglet Conception), cliquez sur le bouton plus près de Variantes :

Une partie du panneau de la barre latérale de conception montrant la position du bouton pour ajouter des variantes.

Une partie du panneau de la barre latérale de conception. ( Grand aperçu)

Cela générera un cadre violet avec une bordure en pointillés qui représente le groupe de variantes que vous avez.

Deux composants de commutation avec l'état désactivé à l'intérieur d'un groupe de variantes.

Le groupe de variantes. ( Grand aperçu)

Vous devriez maintenant avoir deux variantes, utilisez la première pour l'état Off et la seconde pour l'état On .

  • Appliquer un style différent de On state pour en faire l'option active, je recommande d'utiliser un fond bleu (#0B5FFF) et de déplacer le cercle vers la droite.

Deux composants de commutation à l'intérieur de la variante groupe, l'un allumé et l'autre éteint.

Maintenant, les deux styles sont définis pour les états Off et On. ( Grand aperçu)

Ce sont les états du switch qui vont passer de Off à On (et vice-versa) lorsque l'utilisateur clique sur le switch.

Conseil utile : Dans ce cas, ce n'est pas nécessaire mais si vous devez ajouter plus de variantes vous pouvez sélectionner un composant à l'intérieur de la boîte et cliquer sur le bouton violet plus, il ajoutera une copie du composant sélectionné et redimensionnera la boîte automatiquement. (Il est également possible de redimensionner la boîte manuellement comme s'il s'agissait d'un cadre et de dupliquer et d'organiser librement les variantes à l'intérieur.)

Approche alternative

Comme vous l'avez vu, nous avons créé ces composants en les dupliquant à l'intérieur le groupe de variantes mais il est également possible de les créer individuellement et de les combiner en tant que variantesle résultat final sera exactement le même. Si vous voulez essayer cette méthode, créez et sélectionnez simplement deux composants, le panneau de droite aura alors une autre action appelée "Combiner en tant que variantes", cliquez dessus et c'est terminé – vous aurez maintenant les deux mêmes variantes.

Deux composants de commutateur séparés. à gauche avec une flèche pointant vers la droite, à un bouton avec l'action combiner comme variantes. À côté du bouton, il y a une autre flèche pointant à droite vers une boîte de variante avec les deux composants de commutateur à l'intérieur.

Sélectionnez les composants et combinez-les en tant que variantes. ( Grand aperçu)

Cette alternative est vraiment utile lorsque vous avez déjà différents composants et que vous n'avez besoin que de définir les variantes, si vous travaillez sur une bibliothèque, cela vous aidera à la mettre à jour sans avoir à tout recréer à partir de zéro.

Nommez vos variantes.

Nommer les variantes n'aura pas d'effet direct sur le résultat final (sauf si vous utilisez le même nom plus d'une fois) mais définir les noms et les hiérarchies vous aidera à avoir tout mieux organisé et compréhensible pour d'autres collègues qui pourraient avoir besoin d'utiliser le prototype pour d'autres projets.

Par défaut, le groupe principal de variantes est nommé « Propriété 1 », vous pouvez modifier cela à partir de la barre latérale lors de la sélection du groupe entier. Je suggère de renommer cela en "État" car nous allons utiliser les états Off et On.

 Deux copies du même panneau qui a une entrée pour le nom de la variante, le premier panneau à gauche a l'entrée remplie avec le mot « Propriété 1 », et le deuxième panneau à droite a l'entrée remplie avec le mot « État ». Entre les panneaux, il y a une flèche pointant vers la droite pour montrer le changement de « Propriété 1 » à « État ».

Renommez les variantes de « Propriété 1 » en « État ». ( Grand aperçu)

Renommer une seule variante se fait en utilisant le même processus mais vous devez sélectionner la seule variante à l'intérieur du groupe et dans le même panneau, vous trouverez les noms "Par défaut" et "Variante 2" que vous pouvez écraser, par le nom du commutateur doit être "Off" et "On".

En conséquence, les noms de calque des variantes seront automatiquement modifiés en "State=Off" et "State=On".

Fait amusant : Si votre composant n'a que deux variantes et que vous utilisez les noms « Désactivé » et « Activé », il affichera un commutateur au lieu d'une liste déroulante dans la destination !

Rendons cela interactif !

Maintenant que vous avez le composant et les variantes, il est temps d'appliquer les interactions.

  • Cliquez sur l'onglet Prototype (en haut à droite de l'écran) pour ouvrir le panneau Prototype et activer ses fonctionnalités .
  • Sélectionnez la variante Off (elle doit avoir un point bleu) et faites-la glisser sur la variante On pour la connecter.[19659099] Deux composants de commutation à l'intérieur d'un groupe de variantes, le premier est éteint et connecté au second qui est allumé. »/>
    L'état On est connecté à l'état Off. ( Grand aperçu)
    • Vérifiez que vous avez sélectionné toute la variante et pas seulement le calque d'arrière-plan, cela fera fonctionner l'interaction même lorsque l'utilisateur clique sur l'élément de cercle.
    • Dans le panneau Détails de l'interaction, définissez le déclencheur sur Au clic.
    • Assurez-vous que l'action est définie sur Change To.
    • Modifiez l'animation en Smart Animate et utilisez Ease In and Out pour un effet naturel sentiment.

    Je vais traduire ces paramètres en une seule phrase pour expliquer ce qui va se passer : lorsque l'utilisateur Clique sur Off State puis Changez pour On State en utilisant Smart Animate avec Ease In And Out à 300 millisecondes.[19659034]Appliquez les mêmes paramètres à la variante On State afin que, lorsque vous cliquez à nouveau dessus, le commutateur s'éteigne. (Remarque : Figma se souviendra des paramètres d'interaction appliqués aux éléments à l'intérieur du groupe et appliquera les mêmes paramètres lors du déplacement d'une nouvelle interaction. Dans ce cas, vous n'aurez donc qu'à revérifier.)[19659111]Deux composants de commutation connectés l'un à l'autre. »/>

    Les deux états sont désormais connectés. ( Grand aperçu)

    Terminé ! Si vous voulez vérifier si cela fonctionne, vous devez inclure l'une des variantes dans un cadre, sélectionnez le cadre, puis cliquez sur le bouton de présentation (représenté par l'icône de lecture) qui est placé sur les onglets.

     Une partie du Interface Figma avec focus sur l'icône Play utilisée pour les prototypes

    L'icône 'Play'. ( Grand aperçu)

    Cela devrait vous permettre d'activer/de désactiver chaque interrupteur individuellement.

    Cependant, si vous voulez voir la puissance réelle de cette fonctionnalité, dupliquez le composant dans le cadre plusieurs fois (au moins trois ou plus) et activez les individuellement dans la présentation.

    Trois composants interactifs de commutation appuyés de manière aléatoire et plusieurs fois avec le curseur de la souris.
    Les composants interactifs de commutation en action.

    Utilisation de plus de deux variantes

    Cette fonctionnalité devient très puissante. lorsque vous ajoutez plusieurs variantes et que vous les connectez individuellement pour créer un composant réaliste. Voici un exemple où j'ai connecté un total de six variantes avec de petites modifications de la couleur d'arrière-plan pour recréer les multiples états d'un bouton, un classique dans l'industrie de la conception Web de nos jours.[19659123]Six boutons déroulants différents montrant les changements de couleur pour chaque état. »/>

    Un bouton déroulant avec six états différents comme variantes. ( Grand aperçu)

    États des composants

    Ceci est la liste des différents états pour ce composant, y compris également les déclencheurs que nous allons utiliser pour passer d'une variante à une autre.

    1. Default — Default,
    2. Hover — WhileHover,
    3. Pressed — MouseDown,
    4. Active — MouseUp (Il pourrait être possible d'utiliser On Click pour le même résultat),
    5. Hover while Active — WhileHover,
    6. Pressed while Active — MouseDown.[19659133]Conseil utile : Il est possible d'utiliser MouseDown pour simuler le bouton pressé mais non relâché puis d'utiliser MouseUp pour activer une transition, c'est un joli détail d'interaction qui rend le bouton plus réel.

      Un seul bouton déroulant animé avec ses six états différents.
      Utilisez le déclencheur MouseDown avant le déclencheur Click.

      Composants interactifs imbriqués

      Comme pour le déclencheur standard. composants, vous pouvez également créer imbriqué inte composants réactifs.

      En utilisant le même exemple de liste déroulante, il serait possible de créer un seul composant interactif appelé Dropdown avec deux composants interactifs à l'intérieur : le Bouton de liste déroulante et le Menu déroulant. Cela vous aidera à contrôler la façon dont le bouton et le menu interagissent, vous permettant de définir quelle variante du bouton déclenchera l'ouverture du menu.

      Remarque : Il serait possible de créer un autre composant imbriqué pour les options du menu déroulant et utilisez le remplacement pour modifier les différents textes.

       Un groupe de variantes avec six variantes composé d'un bouton déroulant et d'un menu déroulant, l'image montre qu'il est possible de masquer le menu dans certains états du bouton.

      Le même bouton déroulant avec un menu déroulant qui n'apparaît que dans les variantes Au clic et Au survol. ( Grand aperçu)

      Le principal avantage de l'utilisation de composants interactifs imbriqués est le nouveau niveau de modularité qu'il offre pour les prototypes, vous pouvez définir les interactions individuellement et les mélanger en composants interactifs infinis. Le Menu déroulant pourrait être inclus dans d'autres composants (une carte, par exemple) sans avoir à prototyper son fonctionnement à chaque fois.

      Trois boutons déroulants et un curseur montrant comment le survol et le clic fonctionnent, chacun le menu déroulant ouvre et ferme un menu.
      Il est possible de simuler de vrais effets de survol et de clic. ( Grand aperçu)

      On peut aller encore plus loin, il est également possible de naviguer d'une variante vers un cadre externe, vous pouvez connecter la variante simple au cadre en utilisant le On Click trigger et action Navigate To. Dans cet exemple, j'ai connecté chacune des actions du composant Menu déroulant à un cadre externe avec un rectangle gris dans la même position que le menu (Droite, Haut, Gauche, Bas).[19659147]Un diagramme montrant un groupe de cinq variantes d'un menu déroulant avec quatre options : droite, haut, gauche, bas. Chaque option est connectée à un plan de travail externe à l'aide du déclencheur OnClick. « />

      Les destinations de prototype peuvent être connectées en dehors du cadre de la variante. ( Grand aperçu)

      Lorsque vous cliquez sur l'une de ces actions, elle navigue vers le cadre connecté comme c'est le cas avec les prototypes réguliers, la vraie magie se produit lorsque vous devez réutiliser le Menu déroulant pour un autre composant, il aura toutes les interactions à l'intérieur sont déjà effectuées, vous n'avez donc pas besoin de le connecter encore et encore.

       Un bouton déroulant ouvre un menu avec quatre options différentes : droite, haut, gauche, bas. Lorsque vous cliquez sur l'un d'entre eux, un panneau apparaît dans la même direction que les options.
      Ce menu déroulant est un excellent exemple de la réalité d'un composant interactif. ( Grand aperçu )

      Ce flux de travail et les fonctionnalités des composants imbriqués sont incroyables pour les cas de conception de produits où vous avez des tonnes de cadres à connecter car ils réduiront la quantité de travail nécessaire pour créer un prototype de fidélité pour les tests, ou même si vous souhaitez créer une bibliothèque de composants pour les prototypes.

      Special Effects

      C'était tout pour l'introduction à Figma composants interactifs. Comme vous pouvez le voir, il est assez facile d'utiliser cette fonctionnalité pour créer et connecter des interactions à l'intérieur d'un prototype. Mais il est également possible de créer différents types d'effets spéciaux en utilisant des variantes.

      Dans la section suivante, je vais les examiner de près !

      Les boucles

      Il est enfin possible de faire l'infini boucles à l'intérieur de Figma sans trop d'effort et vous pouvez également créer divers spinners et indicateurs de chargement.

       Deux ensembles différents avec trois rectangles animés. Dans le premier ensemble, les rectangles sont redimensionnés de manière aléatoire tandis que dans le second, les rectangles sont alignés et simulent un mouvement de carrousel.
      Les éléments peuvent être redimensionnés pour créer des boucles infinies. ( Grand aperçu)

      Pour créer une boucle, utilisez le déclencheur After Delay défini sur 1 ms pour permuter les variantes automatiquement et connecter au moins deux des eux.

      Un diagramme avec des instructions pour créer une boucle. Il existe trois variantes et flèches, la première variante est connectée à la deuxième variante, la deuxième variante à la troisième et la troisième variante à la première variante pour créer une boucle infinie.

      Utilisez le déclencheur After Delay réglé sur 1 ms. et connectez les variantes. ( Grand aperçu)

      Remarque : 1 ms est le durée minimale que nous pouvons définir dans Figma pour passer d'une variante à une autre et en faire un changement presque instantané ; et, grâce au déclencheur AfterDelay, cela se produira automatiquement. Il est possible d'utiliser un temps de retard plus élevé si vous avez besoin que la boucle ait l'air d'avoir une pause entre les variantes.

      Rotation

      Permettez-moi de commencer la partie suivante de l'article avec une note sur la façon dont Figma gère étrangement la rotation.

      Figma a une façon étrange de faire pivoter les éléments, elle semble être limitée de -179º à un maximum de 180º et ne permet pas d'aller plus loin que ces valeurs. De plus, il n'y a aucun moyen de définir un sens de rotation donc si vous essayez de tourner de 0º à 180º et vice-versa, au lieu de faire un 360º tour, il tournera d'abord à 180º puis reviendra à 0º (comme une balançoire).

      Donc, pour laisser le système identifier correctement la rotation vous devrez utiliser au moins trois variantes.

      Voici comment procéder :

      • Créez un composant avec trois variantes : VariantA, VariantB, VariantC (pour cet exemple, j'ai modifié une ellipse en faire la forme du triangle).
      • Appliquer la rotation suivante aux éléments à l'intérieur des variantes (pas les variantes elles-mêmes).
        • VariantA: définissez l'élément sur 0º et connectez la variante à VariantB.
        • VariantB: définissez l'élément sur -120º et connectez la variante à VariantC.
        • VariantC: définissez l'élément sur 120º et connectez la variante à VarianteA pour boucler la boucle.
      • Toutes les interactions devraient avoir After Delay (1ms) comme déclencheur et un Linear easing.

      Le résultat sera un spinner neutre qui aura trois petites pauses de 1 ms chacune à cause de l'échange de variante, pas parfait mais rapide et pour un prototype, c'est assez bon — et vous serez probablement le seul à remarquer les pauses de toute façon.

      Astuce utile : Vous pouvez soit utiliser le même temps d'animation pour chaque variante pour faire une boucle linéaire, soit jouer avec l'animation en utilisant un temps plus rapide pour certaines variantes et un temps plus lent pour d'autres, cela simulera un assouplissement incurvé.

      Deux formes circulaires similaires à une tarte manquant un morceau, les formes tournent avec des synchronisations différentes, la première est linéaire et la seconde utilise une combinaison de temps lents et rapides.
      La rotation est la même mais les temps d'animation sont différents. ( Grand aperçu)

      Complex Spinners

      Je ne suggérerais pas d'utiliser les composants interactifs Figma pour les spinners complexes, pour de tels cas, il peut être préférable de créer le spinner avec une application d'animation dédiée (telle que After Effects) et importez-le dans le prototype en tant que GIF.

      Micro-interactions

      Les composants interactifs vous permettent d'inclure des détails plus intéressants dans les prototypes. Je vais revenir à l'exemple de commutateur pour vous montrer comment ajouter des micro-interactions à ce composant en utilisant MouseDown et On Click.

      C'est le même commutateur que précédemment, avec deux états, mais à la différence qu'une fois cliqué, le cercle à l'intérieur de l'interrupteur se déformera dans la direction opposée, créant un bel effet visuel, comme si le cercle était attiré magnétiquement de l'autre côté de l'interrupteur.
      Voulez-vous pour transformer un simple commutateur en un commutateur étonnant ?

      Component

      Pour recréer cet exemple, vous devez appliquer quelques modifications à la structure du commutateur :

      • Faites une copie de l'état Off commutateur que vous avez déjà créé.
      • Créez une autre forme d'ellipse de 16*24 px, placez-la sur l'ellipse précédente (le cercle).
      • Unifiez les deux ellipses en tant que groupe booléen en utilisant Union.

      • En savoir plus sur les Groupes booléens →.

      Un diagramme montrant comment fonctionne une union booléenne en utilisant deux ellipses, une grande et une autre petite.

      Le groupe booléen combinera ces deux formes en un seul cercle. ( Grand aperçu)
      • Appliquez 32 px de border-radius au calque Union, cela créera l'effet de distorsion que vous pouvez voir dans l'exemple.
      • Créez le composant (Ctrl/Cmd + Alt + K).

      Variantes et prototype

      Vous aurez besoin d'un total de quatre variantes pour que cela fonctionne : OffStateOffStatePressedOnState et OnStatePressed.

      • Utilisez le déclencheur Mouse Down pour simuler la pression de la souris et activez la distorsion en déplaçant la plus grande ellipse 8 px de l'autre côté.
      • Utilisez le déclencheur On Click pour changer les états de Off à On.

      Un diagramme montrant comment connecter quatre variantes à recréer la micro-interaction. La première utilise MouseDown pour activer la deuxième variante, la deuxième variante utilise OnClick pour activer la troisième variante, la troisième variante utilise MouseDown pour activer la quatrième variante et la quatrième variante utilise OnClick pour activer la première variante.

      En voici une autre. diagramme amusant montrant comment construire le composant interactif ! ( Grand aperçu)

      Animation 3D avec une séquence d'images

      Avant de continuer, je tiens à remercier Andrea Caul'auteur de cette séquence 3D sympa que je vais utiliser comme exemple.[19659003]C'est plus un hack pour intégrer des animations 3D dans un prototype Figma, vous pouvez également utiliser des GIF mais de cette façon vous obtenez un contrôle total sur les images, pas seulement jouer/arrêter, vous permettant de créer un prototype qui simule une interface à faire pivoter objets, couramment vus sur les sites Web de voitures où vous pouvez faire pivoter la voiture.

       L'objet principal est un carré de verre avec à l'intérieur une sphère en porcelaine, il s'agit d'une composition 3D et l'objet est positionné dans une vue à 45 degrés. Il y a deux flèches, une à droite et une autre à gauche. L'animation montre la souris cliquant sur les flèches et l'objet pivote dans la même direction.
      Imaginez un site Web de commerce électronique avec un modèle 3D que vous pouvez retourner. ( Grand aperçu)

      Dans ce cas, j'ai utilisé neuf images (vous pouvez en utiliser plus ou moins, selon la rotation dont vous avez besoin), les étapes importantes pour reproduire cette interaction sont :[19659034]Créez une variante par image (dans ce cas, 9 variantes seront nécessaires) et incluez une image dans chacune, en suivant l'ordre de séquence.

    7. Créez le bouton fléché, ce sera le Hotspot.
    8. Connectez le droit flèche vers la variante suivante (répétez pour chaque variante).
    9. Connectez la flèche gauche à la variante précédente (répétez pour chaque variante).
    10. Utilisez l'animation Instant au lieu de Smart Animate pour éviter les effet de fondu entrant / sortant et créant l'illusion de mouvement.

Conclusion

Plus j'utilise cette fonctionnalité, plus je pense que cela changera la donne pour les entreprises travaillant dans les domaines du Web et de la conception de produits. La maîtrise des composants interactifs et des variantes permettra aux concepteurs de produire des prototypes meilleurs, plus avancés et réalistes avec moins d'effort, vous donnant la liberté de travailler sur les conceptions réelles et de moins vous concentrer sur l'outil de conception lui-même.

Comme mentionné précédemment, je ' J'ai créé un fichier communautaire Figma avec les exemples de cet article (et quelques autres expériences que j'ai faites pendant le test de la nouvelle fonctionnalité). Une fois que vous rejoignez la bêtan'hésitez pas à dupliquer ma conception, à suivre ou à commencer à expérimenter, et partagez vos résultats ! Jouez avec les temps d'animation, modifiez l'accélération, essayez de faire pivoter, éléments d'échelle, essayez d'imbriquer différents composants interactifs.

Si vous avez des questions ou si quelque chose n'est pas tout à fait clair, laissez une question dans la section Commentaires ci-dessous, ou envoyez-moi un ping sur Twitter (@emi_cicero) — I serais heureux de vous aider ! 🙂

Autres lectures

Smashing Editorial" width="35" height="46" loading="lazy" decoding="async(mb, vf, yk, il)




Source link