Prototypes Figma: un guide rapide et étape par étape des maquettes utiles

Prototypage FIGMA: Transformer les modèles statiques en expérience interactive dynamique

Points de base:

• Le prototypage FIGMA convertit les modèles statiques en prototypes dynamiques et interactifs pour aider les développeurs à comprendre les processus utilisateur, les fonctions et les sentiments de la conception.
• Les étapes pour créer un prototype Figma incluent: la création d'un cadre de défilement horizontal, la création de transitions Artboard, la création de la fonction de retour à l'art-babard précédent et la création d'animations de synchronisation complexes. Chaque étape implique des paramètres et des interactions spécifiques pour assurer des transitions et des effets d'animation en douceur.
• Les prototypes Figma sont interactifs et peuvent être partagés avec d'autres pour prévisualiser et collecter des commentaires. Cette fonctionnalité améliore la collaboration et permet des améliorations basées sur les commentaires reçus. Figma prend également en charge des animations plus complexes via des plugins tels que Lottiefiles.

Le prototypage est le processus de transformation des modèles statiques en modèles interactifs et dynamiques (plus connus sous le nom de prototypes ). Transformer un modèle statique en réalité est sans aucun doute l'une des étapes les plus excitantes (sinon les plus excitantes) d'un flux de travail de conception. Pour les développeurs, il est crucial de comprendre les processus utilisateur, les sentiments et les fonctions de la conception. Quelle meilleure façon que d'utiliser Figma, quel est le meilleur outil de conception au monde, selon l'enquête 2020 Design Tools?

Une fois que vous maîtrisez la méthode de prototypage de FIGMA, vous trouverez cela simple et facile à utiliser et agréable. Copiez d'abord ce modèle statique (cliquez sur "une série d'interactions", puis cliquez sur "Copier sur mon projet"), puis tout au long du tutoriel, nous ajouterons de plus en plus de fidélité fonctionnelle. Votre copie locale doit ressembler à ceci:

Remarque: Je suppose que vous avez au moins une certaine connaissance des outils de conception d'interface utilisateur modernes tels que Figma ou Sketch.

Étape 1: Créez un cadre de défilement horizontal

Commençons par Artboard 1 pour activer les sélections de cartes au-delà de la fenêtre pour faire défiler horizontalement. C'est une façon de faire de dynamiquement notre modèle sans créer ce que Figma appelle une "connexion". La connexion nous dirige vers le nouvel artboard, mais ce n'est pas ce que nous allons faire à l'étape 1.

Sélectionnez d'abord les cartes dans le panneau Calques (barre latérale gauche), puis utilisez le menu déroulant pour modifier l'option de groupe à cadrer du panneau de conception (cette fois la barre latérale droite).

Je n'entrerai pas en profondeur, mais la principale différence entre un groupe et un cadre est qu'un groupe enveloppe étroitement ses éléments enfants tandis que le cadre peut être de n'importe quelle taille. Cela signifie:

• Les éléments enfants du groupe évolueront avec le groupe, tandis que les éléments enfants du cadre sont plus têtus (c'est une fonctionnalité, pas un bug)
• Les éléments enfants du cadre sont alignés par rapport à son cadre, tandis que les éléments enfants du groupe sont toujours alignés par rapport à son artboard
• Le cadre peut contenir du contenu de débordement qui peut faire défiler horizontalement ou verticalement (c'est ce que nous essayons)

Attendez, cela signifie-t-il que le tableau art est en fait un cadre? En effet: les autres outils de conception de l'interface utilisateur sont appelés planches artistiques, et Figma les appelle Frames . Cela peut être dû au fait que dans Figma, les cadres peuvent être imbriqués dans d'autres cadres, qui est légèrement différent des planches artistiques dans d'autres outils comme Sketch, Adobe XD.

Passer au mode prototype ( ⌥ 9 ), vous pouvez maintenant utiliser le paramètre de comportement de débordement, puis modifier l'option déroulante de No Scroll vers un défilement horizontal.

Maintenant, vous remarquerez que l'ombre est étrangement coupée par le cadre nouvellement converti, mais c'est en fait le comportement standard du contenu débordant, qui peut être fixe relativement facilement.

Étant donné que l'ombre a une variable floue de 30 et que le cadre peut être de n'importe quelle taille, nous devons redimensionner le cadre afin qu'un espacement supplémentaire soit laissé autour de ses bords. Redimensionner ( shift ⌘ ↑ ↓ ← → ) et affiner ( shift ↑ ↓ ← → )) objets cela devrait être facile.

Soit dit en passant, vous remarquerez peut-être (si vous cliquez sur le cadre), les cartes et leur espacement peuvent être facilement réorganisés. Cela n'a rien à voir avec le tutoriel lui-même, mais c'est toujours génial.

Étape 2: Créez une transition artboard

Pour l'étape suivante, essayons une interaction qui connecte un art à un autre, également connu sous le nom de "connexion".

Sélectionnez le cadre "carte" (oui, toute la trame, car peu importe la carte cliquée maintenant). Ensuite, en supposant que vous êtes toujours en mode prototype, faites glisser le connecteur (c'est-à-dire que le cercle avec des bordures affichés lors du volant) jusqu'à Artboard 2. Ces planches artistiques sont désormais connectées.

Après avoir mis le connecteur sur Artboard 2, le paramètre "Connexion" (qui devrait maintenant être affiché) devrait ressembler à ceci:

• Détails d'interaction
  • "Lorsque cliquez" (L'interaction sera déclenchée par des clics)
  • "Navigation vers" / "Artboard 2" (cliquez à l'utilisateur à naviguer vers Artboard 2)
• Animation
  • "push" / "←" ("Paper 2" poussera du côté droit à l'écran)
  "ralentir" / "300 ms" (à moins de 300 ms, l'animation commencera rapidement puis ralentira progressivement)
  Sélectionnez la case à cocher "Smart Animation Match Layer" (si elle reste inchangée, des éléments courants tels que les boutons arrière et la navigation ne seront pas animés)

Vous voulez voir ce que nous avons fait jusqu'à présent? Cliquez sur le bouton "Demo" dans le coin supérieur droit (c'est-à-dire l'icône

play ). Si vous utilisez FIGMA dans votre navigateur Web, cela ouvrira un nouvel onglet.

Astuce: appuyez sur r pour recharger le prototype.

Étape 3: Back!

Avant d'aller de l'avant et de fouiller dans des connexions plus complexes, assurons-nous que nous pouvons retourner à Artboard 1 (ou n'importe quel artboard dont nous venons). Créez une autre connexion, cette fois en commençant par le bouton de retour, en définissant comme suit:

Détails d'interaction
• "Lorsque vous cliquez sur"
  "back"

Les paramètres d'animation ne seront pas disponibles cette fois car les options sont corrigées. Plus précisément, la transition sera animée inversée. Par exemple, si nous utilisons "push ←" pour passer à l'artboard, nous utiliserons "push →" pour passer à l'arrière.

Étape 4: Créer une animation de synchronisation complexe (relativement) complexe

Dans la dernière étape, nous créerons une seule animation qui couvre plusieurs planches artistiques et animer plusieurs objets séparément plutôt que l'ensemble de l'Artboard. Plus précisément, nous ferons pivoter la carte élargie à gauche après avoir cliqué sur le bouton, puis définirons la minuterie pour la faire pivoter à droite, puis revenir à son état d'origine.

Essentiellement, c'est une animation swing.

Sélectionnez l'objet "bouton" sur Artboard 2 et créez un connecteur connecté à Artboard 3. Utilisez les paramètres suivants:

Détails d'interaction
• "Lorsque vous cliquez sur"
  "Navigation vers" / "papier 3"
Animation
• "Animation intelligente"
  "ralentir" / "300 ms"

REMARQUE: Puisque nous avons choisi "l'animation intelligente" comme type d'animation, les couches qui existent dans les deux planches artistiques en même temps mais visuellement différente se transformeront en douceur, mais seulement si la structure de la couche et la couche pertinente, le nom reste cohérent . S'ils ne sont pas cohérents, Figma ne comprendra pas que ces calques sont de la même couche et qu'ils ne seront pas animés correctement.

Dans le panneau de conception, vous devriez voir que j'ai réglé l'arrière-plan du bouton sur # FF0000 et faire pivoter la carte vers la gauche.

Cependant, comment pivotez-vous les 300 ms "Rotation Animation gauche" à droite après sa finition? Eh bien, c'est là que les animations chronométrées sont nécessaires. Répétez les étapes ci-dessus, cette fois la connexion Artboard 3 à Artboard 4, "After Delay" / "300ms" est la seule différence. Pour terminer l'interaction, connectez à plusieurs reprises Artboard 4 à Artboard 5.

C'est ainsi que nous exécutons des animations en continu. Dans notre exemple, l'interaction de clic initial active "l'animation Rotle à gauche" et l'animation suivante suivra automatiquement le minuteur.

Le prototypage Figma est amusant, non?

Nous avons maintenant terminé ce tutoriel. Le fichier Figma ne semble pas différent (à l'exception de certains connecteurs visibles lors de l'utilisation du mode prototype). Cependant, il aura une fonction très différente en mode démo. Si vous ne suivez pas le tutoriel, consultez la version "dynamique" où vous pouvez tester les résultats finaux.

C'est cool, non?

Bien que nous puissions certainement envisager des styles d'animation et des types d'interaction plus complexes, ce que nous voyons ici devrait couvrir environ 99% de ce que vous devez savoir. En ce qui concerne l'interaction, la simplicité est toujours meilleure!

Pour les animations qui nécessitent plus de complexité, il y a un plugin Clean Figma appelé Lottiefiles qui vaut vraiment la peine d'être essayé.

Pour plus d'informations sur FIGMA, vous pouvez également lire sur l'utilisation de Figma pour la conception du filaire.

Des questions fréquemment posées sur les prototypes Figma

Quel est le prototype Figma? Le prototype Figma est une représentation interactive d'une conception créée à l'aide de Figma, un outil de conception collaboratif. Il permet aux concepteurs de démontrer et de tester l'efficacité de leurs conceptions, offrant une expérience plus dynamique et centrée sur l'utilisateur.

Comment créer un prototype de Figma? Pour créer un prototype dans FIGMA, concevez un écran ou un cadre, puis utilisez le mode prototype pour relier ces cadres pour définir les interactions, les transitions et les animations pour simuler l'expérience utilisateur.

Puis-je prévisualiser mon prototype Figma avant le partage? Oui, Figma vous permet de prévisualiser votre prototype directement dans l'éditeur de Figma. Entrez simplement le mode prototype et cliquez sur le bouton «Demo» pour découvrir votre interaction de conception.

Comment partager mon prototype Figma avec les autres? Vous pouvez partager votre prototype Figma en générant des liens partageables. Accédez au menu de partage, ajustez les paramètres de partage et copiez le lien. Toute personne ayant ce lien peut afficher et interagir avec votre prototype.

Existe-t-il un moyen de collecter des commentaires sur mon prototype Figma? Oui, Figma prend en charge les commentaires sur les conceptions et les prototypes. Partagez vos liens prototypes et les téléspectateurs peuvent laisser des commentaires directement sur des éléments ou des zones spécifiques de la conception, facilitant la collaboration et la collecte de commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!