Figma - Prototype avec deux actions sur un bouton (hover & clic) + auto Layout + composant + variant

[@JessUIdesign]

Est-ce que vous souhaitez que je réponde à une autre de vos questions ? Quel thème souhaitez-vous que j'aborde ?

[@JessUIdesign]

@@YannisSmesny 🙏 J’avais déjà fait une vidéo sur Framet web et je vais me pencher sur protopie. Merci pour tes propositions 😊

[@YannisSmesny]

@@JessUIdesign Oui, Protopie semble un bon outil, ils ont même commencé à faire en beta du prototypage vocal apparemment, j'ai pas encore essayé par contre. Voici le lien medium sur le sujet: blog.protopie.io/protopie-5-1-give-your-interactions-a-voice-444e54b721c9 Super tes vidéos d'ailleurs, très claire, très instructif 😊

[@JessUIdesign]

Merci beaucoup Yannis 🙏😊

[@lailague]

@@YannisSmesny Protopie c'est vraiment le plus puissant et simple que j'ai pu tester, poir le prototypage c'est vraiment ouf, les états des components sont plus faciles à faire (genre hover etc) mais aussi pour faire des sous-menus, dropdown, animations poussées… un axure mais mieux fait :D

[@CarineLarmusc]

Bonjour, je viens de découvrir les 'local styles' dans Figma, notamment pour créer un styleguide. Peut-être que ça peut être un bon sujet de vidéo afin de voir tout ce qui est possible et de bien les maîtriser?? Juste une idée :)

[@aguila.design]

Bonjour Jessica, petite astuce pour le hover, au lieu de "Mouse Enter" + "Mouse Leave, tu peux utiliser "While Hovering". Mouse Enter et Leave sont utiles si tu veux faire des animations différentes entre l'entrée et la sortie du survol, si tu veux juste faire apparaitre/disparaitre instantanément ou avec un fondu alors ils ne sont pas utiles. Bonne vidéo en tout cas continue comme cela ! PS: Vivement qu'ils mettent enfin le prototyping de variant, c'est la base 😥

[@JessUIdesign]

Merci 😊 Je ferai une vidéo là-dessus aussi. Et c’est clair vivement la mise à jour sur les prototypes c’était censé sortir en janvier...

[@ameliegualandris1479]

Tutos toujours très clairs et synthétiques ! Merci ! :)

[@JessUIdesign]

😊🙏

[@heliabng]

Merci beaucoup pour ce tuto

[@JessUIdesign]

Avec plaisir ☺️🙏

[@fannymialon]

Super vidéo Jessica ! 🙌

[@JessUIdesign]

Merci Fanny :) J'ai eu du mal à me motiver pour faire ma vidéo de la semaine après avoir vu le niveau de ta vidéo, le temps que tu as dû passer au montage :D Mais je les améliorerai quand j'aurai plus de temps :p

[@fannymialon]

@@JessUIdesign Tu rigoles ! Elles sont top tes vidéos ! Et puis contrairement à moi, tu parles en face cam et ça paraît hyper facile pour toi 😄donc ne t'inquiète pas, j'ai la pression pour la prochaine moi aussi ahahah

[@JessUIdesign]

😊🙏

[@godaffligvalorant9665]

merci pour ses video bien expliquer

[@JessUIdesign]

Avec plaisir :)

[@lorrainebayard6352]

merci la vidéo m'a été utle :)

[@JessUIdesign]

☺️

[@DenisNgarndiguina]

Salut! Une question: Peut-on inserer des liens sur les boutons avec figma?

[@JessUIdesign]

Hello Tu peux ajouter un lien sur le texte de ton bouton : - Sélectionne ton texte. - Clique sur Create link dans la barre d'outils. - Saisis ou copie une URL dans la zone de saisie prévue à cet effet au-dessus du texte sélectionné. - Appuie sur Entrée pour appliquer le lien.

[@lailague]

Hey comment as tu fait l'auto layout ? C'est un raccourcis particulier ? Merci pour tes vidéos :)

[@JessUIdesign]

Pour créer un auto-Layout les raccourcis clavier c’est Shift+A Si tu veux j’ai déjà fait une vidéo où j’explique en détail auto-Layout je crois que j’ai mis un lien dans la description cette vidéo. Mise à jour fin novembre auto-Layout responsive trop hâte

[@SkyInfinity]

Bonjour Jessica :) Je voulais savoir, j'ai réalisé une maquette, je voudrais rendre mes boutons avec des animations, Suis-je obligé de dupliqué la frame pour chaque bouton ? Ça fait beaucoup de frame si j'ai par exemple 30 boutons :/

[@JessUIdesign]

Oui malheureusement la mise à jour sur les prototypes n’est pas encore sortie du coup, il faut dupliquer chaque bouton...

[@SkyInfinity]

@@JessUIdesign D'accord, merci de ta réponse ;)

[@JessUIdesign]

Je t’en prie :)

[@louisthopa8722]

Bonjour, est-ce un logiciel payant ?

[@JessUIdesign]

Je suis toujours en version gratuite 😉 Il y a plusieurs possibilités et dont les versions payantes, utiles pour le travail en équipe

[@margauxdoisy9459]

peux tu m aider?? je trouve pas comment on peut faire un menu deroulant??

[@JessUIdesign]

Dans la dernière vidéo que j’ai faite avec l’apparition d’un menu de niveau 3 ça peut t’aider.

[@ProgrammeToVS]

Si je puis me permettre, à quoi ça sert de faire un composant si à la fin les actions se réalisent sur des écrans? Le but du composant est de ne pas réaliser plusieurs écrans pour un élément. Donc logiquement, dans le composant, tu dois relier les différentes actions avec clic et le hover. Pas bien compris ton tuto qui me semble un peu bancale...

[@JessUIdesign]

Bonjour, cette vidéo date de novembre 2020. Depuis, Figma a eu de multiples mises à jour majeures. Dont les fameux composants interactifs donc plus besoin de faire ça aujourd’hui en 2024.