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

🔥 Apprendre à utiliser Figma rapidement 🔥
jessicatrocme....
⇩ Voir la suite ⇩
🏆 Master design avec moi
✅ ❤️ Formation FIGMA pour maitriser auto-layout et les variables : Créer des UI Design responsive avec Figma :
jessicatrocme....
✅ Formation : Apprendre à utiliser Figma rapidement :
jessicatrocme....
Je vous montre comment créer des composants, des variants, des blocs auto-layout pour des menus et sous-menu de type dropdown et megamenu. Je vous montre également la partie prototype.
/////////// Liens dans la vidéo
Les variants : • FIGMA Intro VARIANTS -...
Auto-layout : • FIGMA AUTO-LAYOUT mise...
Les composants : • Figma tutoriel : Les c...
Prototype : • Figma tutoriel : PROTO...
/////////// Qui suis-je ?
Web Designer et développeuse Front-end depuis 10 ans. J'ai eu un cursus atypique avec licence de Physique-Chimie, un master MEEF mais j'ai trouvé ma passion il y a 10 ans. En autodidacte, je me suis formée grâce à des livres, des tutos et l'entraînement. Depuis, j'ai eu beaucoup d'expérience dans le domaine, avec de nombreux sites dont beaucoup dans le publique comme par exemple les derniers sortis en début 2020 :
www.haute-vien...
assises.haute-...
www.cc-montesq...
www.technopole...
////////// Connectez-vous avec moi ici 👍🏼
👀 ABONNEZ-VOUS : / @jessuidesign
Facebook : / jessicatrocmedesign
LinkedIn : / jessica-trocm%c3%a9-96...
Contact pro & partenariat : [e-mail]
#figma #variant #autolayout

[@JessUIdesign]

Des astuces à partager sur les prototypes ?

[@zoouspacerjiggy6795]

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

[@JessUIdesign]

🙂

[@alphandiaye4880]

Merci beaucoup pour votre excellente démonstration 👍 !

[@JessUIdesign]

Avec plaisir 🙏🤗

[@vaniarensi7627]

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

[@JessUIdesign]

Thank you 😊🙏

[@ernestnjonkeng1239]

c'est super ce que vous faites

[@JessUIdesign]

Merci ☺️ 🙏

[@lonydebusinesscommunity9137]

Merci pour ce tuto Jessica ! 🤝✅

[@JessUIdesign]

Avec plaisir 😊🙏

[@mnemosyne4222]

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

[@JessUIdesign]

Avec plaisir 😊🙏

[@manon3054]

Merci beaucoup pour cette vidéo !

[@JessUIdesign]

☺

[@florianginet8924]

❤️ toujours appréciable

[@JessUIdesign]

😊

[@Faeliss]

Merci pour ce tuto ;)

[@JessUIdesign]

😊

[@TheBenjaminDesigns]

super vidéo ! merci bcp ! 🙏

[@JessUIdesign]

😊🙏

[@jeanmarcakossi4575]

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

[@JessUIdesign]

Avec plaisir :)

[@edithgomis696]

Merci beaucoup

[@JessUIdesign]

😊🙏

[@clementfabre6330]

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

[@JessUIdesign]

Avec plaisir 😊🙏

[@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.. :)

[@satheen_fr]

Merci !

[@JessUIdesign]

😊

[@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

[@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 ?

[@kaiser6641]

Parfait ton tuto Jessica 👍

[@JessUIdesign]

Merci ☺️ 🙏

[@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

[@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 :)

[@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

[@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

[@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

[@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 !

[@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 :) !

[@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

[@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 ;)

[@christophevanengelen]

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

[@JessUIdesign]

…