Figma - Menu de navigation, sous-menu de type dropdown et megamenu - Prototype

[@JessUIdesign]

Des astuces à partager sur les prototypes ?

[@YannickMaillotPhilippe]

J'adore : très clair et efficace! Merci.

[@JessUIdesign]

@@YannickMaillotPhilippe Merci 🙏

[@fariscooo9413]

Je travaille actuellement sur un examen de webdesign, comprenant la réalisation de maquettes Figma. J'ai commencé par faire un menu de navigation un peu système D mais le rendu prototypage était beaucoup trop complexe (le rendu était fonctionnel mais la complexité de l'architecture était absurde). Je voulais faire quelque chose de propre, et je suis très heureux d'être tombé sur cette vidéo. J'ai suivi la vidéo, pas à pas, et le rendu est très propre en appliquant l'identité graphique que j'avais défini. Ca m'a permis de mieux comprendre les subtilités de l'auto-layout selon les différents éléments (texte, frame, container...). Merci beaucoup pour cette aide précieuse qui m'a permis d'avancer beaucoup plus rapidement 🥰

[@JessUIdesign]

@@fariscooo9413 je suis trop contente que ce tuto t’aie bien aidé 🤗

[@alphandiaye4880]

Merci beaucoup pour votre excellente démonstration 👍 !

[@JessUIdesign]

Avec plaisir 🙏🤗

[@ernestnjonkeng1239]

c'est super ce que vous faites

[@JessUIdesign]

Merci ☺️ 🙏

[@zoouspacerjiggy6795]

si tu savais à quel point je t'aime d'amour x) tes vidéos m'ont sauvés !!!

[@JessUIdesign]

🙂

[@lonydebusinesscommunity9137]

Merci pour ce tuto Jessica ! 🤝✅

[@JessUIdesign]

Avec plaisir 😊🙏

[@manon3054]

Merci beaucoup pour cette vidéo !

[@JessUIdesign]

☺

[@mnemosyne4222]

Vraiment merci d'exister ! Tes vidéos sont vraiment AU.TOP ! Merci mille fois !

[@JessUIdesign]

Avec plaisir 😊🙏

[@spip931]

Bonjour Jess, Merci pour cette vidéo 👍 J'ai une question : Est-ce qu'on peut combiner 2 actions au passage de la souris (ou au clic) avec la version gratuite de Figma, à savoir afficher un sous-menu en overlay comme vous montrez + changer d'état (en l'occurrence passer à un autre variant) ? D'après ce que dit Figma lui-même, ça n'est pas possible avec la version gratuite ? Est-ce que vous confirmez ? Y-a-t-il une solution alternative ou de contournement SVP ? Merci par avance pour votre réponse 🙏 Bonne journée 😉

[@JessUIdesign]

c’est effectivement avec la version payante

[@spip931]

​@@JessUIdesign Merci pour la réponse 😉🙏 Bonne journée et bonne continuation 😉

[@vaniarensi7627]

One of the best videos about prototyping navigation in Figma 👏🏻

[@JessUIdesign]

Thank you 😊🙏

[@florianginet8924]

❤️ toujours appréciable

[@JessUIdesign]

😊

[@Faeliss]

Merci pour ce tuto ;)

[@JessUIdesign]

😊

[@carolecarrascosa3804]

bonjour, merci pour vos tutos. Cependant, je ne comprends pas, après avoir refait à plusieurs reprise, lorsque que je met mon asset "Nav Items" dans la frame, je crée un auto layout, je suis les directives, mon shadow se met seulement sur l instense "navigation Items" ??🙃 Pouvez-vous, m'aiguiller, cordialement En fait, c'est ok je n avais pas mis de Color sur le contenait!! 🙂

[@JessUIdesign]

Bien vu :)

[@edithgomis696]

Merci beaucoup

[@JessUIdesign]

😊🙏

[@seiyaken69]

Bonjour et merci pour ce tuto. Je me demande, bien que ce soit paradoxale, est-il possible de laisser le header au premier plan quoi qu'il arrive ? Si quelqu'un a une réponse, je prends. Merci d'avance.

[@JessUIdesign]

☺️🙏 Peut-être en créant un composant interactif. A tester

[@spip931]

Bonjour Jess, J'ai essayé d'afficher mon sous menu non pas au clic comme dans la vidéo, mais au passage de la souris (While overing). Problème : Mon sous menu apparait bien au passage de la souris, mais dès que ma souris n'est plus sur l'item de niveau 1, le sous-menu disparait. Comment faire pour que le sous menu reste affiché SVP ? Merci pour votre réponse Bonne journée

[@JessUIdesign]

Je déconseille de faire apparaître un sous-menu au survol de la souris car tu rencontres ce type de problème même une fois développé. Fais plutôt apparaître au clic le sous-menu

[@TheBenjaminDesigns]

super vidéo ! merci bcp ! 🙏

[@JessUIdesign]

😊🙏

[@clementfabre6330]

Je te remercie pour tes vidéos ! Super pour progresser sur Figma :)

[@JessUIdesign]

Avec plaisir 😊🙏

[@satheen_fr]

Merci !

[@JessUIdesign]

😊

[@andremelo3869]

Cest video est parfait! Je ne parle pas le francais tres bien, je suis debutant mes tons videos sont an inspiration pour moi, je suis tres contant de avoir (find*) ton channel.

[@JessUIdesign]

Thank you 😊

[@AlainMazy]

C'est marrant, j'utilise Poppins aussi et en 16px également.. :)

[@davidguillermin619]

Bonjour à tous, Je viens de crée des menu déroulant. Mais lorsque je sélection une catégorie dans mon menu je ne peux pas revenir en arrière. Avez vous une solution ?

[@JessUIdesign]

@@davidguillermin619 tu vas pouvoir gérer ça avec les variables maintenant

[@paynemenelick7665]

merci pour ces tuto Jessica très instructifs!! en suivant tes explications dans cette vidéo, je me rends compte pour les prototypes, au niveau de ma variante que je n'ai pas la fonctionnalité ''change to'' pour le hover . de plus en liant le maitre ''item niveau 1'' à son instance dans la variante je n'atteint que le texte et non la version hover. Pourrais tu m'éclairer sur ce problème?

[@JessUIdesign]

En effet, pour le change to, il s’agit encore de la version Bêta. Il faut s’inscrire pour être bêta testeur et ainsi tester cette nouvelle fonctionnalité Voici le lien : lnkd.in/du7a4Qb J’avais fait une vidéo là dessus quand c’est sorti : kzbin.info/www/bejne/sJnIpWOXq518is0 Concernant, les instances si tu as fait des modifications (overrides) par rapport à ton Master, c’est normal que ton instance ne se modifie plus. il faut que tu les enlèves via le clic droit Peut être que la vidéo sur les composants pourra t’aider. Sinon n’hésite pas à revenir vers moi et je ferai une vidéo.

[@paynemenelick7665]

@@JessUIdesign merci Jessica ta réponse m'a bien aidé figma c'est vraiment l'outil à adopter je suis bien d'accord avec toi !

[@arnaudbervelle9178]

Bonjour svp j'aimerais mettre mes réalisations figma sur mon compte Instagram mais je constate que le format de mes réalisations ne s'affichent correctement savez comment faire ? Merci

[@JessUIdesign]

Pour ma part, j’adapte mes design si besoin en fonction de la plate-forme

[@jeanmarcakossi4575]

Merci beaucoup, je ne savais pas c'était aussi simple faire un dropdown

[@JessUIdesign]

Avec plaisir :)

[@kaiser6641]

Parfait ton tuto Jessica 👍

[@JessUIdesign]

Merci ☺️ 🙏

[@romainthomas7949]

Bonjour Jessica, merci beaucoup pour ce tutoriel, et pour les autres aussi ! Je fais face à une difficulté que je ne comprends pas comment contourner : Vers 12 minutes, quand vous faites un hover sur les variant, vos "interaction details" se mettent par défaut sur "change to". Pour ma part, je n'ai pas la possibilité de faire un "change to", je n'ai que les propriété d'overlay (open, swap...), de lien ou de scroll. Du coup impossible de faire un hover directement sur les variant, ce qui m'aiderais bien^^ En vous remerciant

[@JessUIdesign]

Bonjour Romain, En effet, il s’agit de la version encore en Bêta. Il faut s’inscrire pour être bêta testeur et ainsi tester cette nouvelle fonctionnalité Voici le lien : lnkd.in/du7a4Qb

[@romainthomas7949]

@@JessUIdesign Merci infiniment❤️. Excellente journée !

[@niccolo8159]

Quand je met un shadow sa me le met sur chaque items et non sur la totalité pourtant je sélectionne bien la totalité Pourrait vous m'aider merci

[@JessUIdesign]

Il faut que ton container ait une couleur de fond même blanche

[@JessUIdesign]

Tu me diras si c’est bon pour toi

[@boblol77470]

Pour avoir le menu des emojis sur Mac, tu peux faire un Command Control Space 👍 Très bonne vidéo 🙂

[@JessUIdesign]

Merci 😊

[@GaelPorte]

"Touche Windows + ;" sur Windows

[@lauramg9098]

Merci Jessica pour cette vidéo très formatrice, sais-tu s'il est possible de rendre un item cliquable pour qu'il fasse apparaître un autre composant dans le menu, et que la taille du menu s'ajuste automatiquement avec ce nouvel composant ?

[@JessUIdesign]

Je vais voir si c’est possible de faire ça maintenant

[@JessUIdesign]

J'ai vérifié et avec les composants interactifs cela fonctionnent, cela s'ajuste. Quand c'était encore en beta il y avait un soucis mais maintenant c'est bon. Je vais prévoir une vidéo dessus ;)

[@lauramg9098]

@@JessUIdesign merci beaucoup :) !

[@amandinedelavoie1841]

Bonjour Jess ! J’adore tes vidéos et grâce à toi j’évolue super bien avec Figma ! Par contre j’aurai une petite question , j’aimerais faire un bouton avec un côté skew, sauf qu’en utilisant le auto layout je n’arrive pas ensuite à modifier le côté skew du bouton J’ai vu que tu faisais des vidéos FAQ, tu crois que ce serait possible d’en faire une à ce sujet ? merci beaucoup ☺️ Et aussi est-ce que tu penses refaire des petites promos sur tes formations ? Merci beaucoup !!!

[@JessUIdesign]

Bonjour Amandine, Pour la formation, j’avais fait une promo il n’y a pas longtemps. Exceptionnellement, Je viens de te faire un lien avec une promo valable jusqu’au 18 mars : jessicatrocme.podia.com/apprendre-a-utiliser-figma-rapidement?coupon=PROMOEXCEPTIONNELLE Concernant ton bouton style skew, Je mets ça comme vidéo à faire dans ma to do list. Par contre, j’ai pas mal de sujet à traiter avant 😅

[@amandinedelavoie1841]

@@JessUIdesign merci beaucoup Jess ! Je suis pressé de voir ta prochaine vidéo Proposes tu des formations sur Udemy ? Je ne t’ai pas trouvé sur cette plateforme

[@JessUIdesign]

@@amandinedelavoie1841 non je ne suis pas sur Udemy

[@christophevanengelen]

Un minimum de design améliorerait l'intention :)

[@JessUIdesign]

…

[@AlainMazy]

Je ne connais pas figma, je me demande jusqu'où on peut aller avec ce logiciel.. T'as pas fini d'apprendre un truc que t'en a déjà 10 que tu découvres et qui t'intéressent.. pff

[@evessehoudonaldovignikin6664]

La qualité de la vidéo 😭

[@JessUIdesign]

La vidéo a plus de 2ans. Je t’invite à regarder plutôt mes derniers tutos Figma à jour ;)