Comment animer un menu nav bar sur

Ça fait bien longtemps que je n'ai pas fait de tuto figma mais j'avais bien envie d'en refaire. Cette fois-ci axé sur l'UI/UX. Dans le premier de cette série, on va voir comment on peut créer un composant menu (ou nav bar) et l'animer.
#ui #ux #figma

[@mickadoule]

N'hésite pas à me dire ce que tu voudrais que j'aborde en tuto Figma ;)

[@Cyrill770]

Salut Micka, pourrais tu nous faire un tuto sur les inputs avec des curseurs et conditions si un champ est rempli ou non pleeeease ;p

[@inspireanddesign]

Nous sommes en train de faire la migration des nos projets en entreprise de XD vers Figma, et je tiens à te remercier grandement 🙏. Toute l'équipe s'est abonnée à ta page. Du courage

[@mickadoule]

Bienvenue à vous tous ! Et courage pour cette migration. Je me souviens avoir fait une migration de Sketch vers Figma, c'est pas de tout repos 😅

[@Frederic59236]

Jé découvre cette chaine , cette vidéo était parfaite pour donner envie de progresser. On sent qu'il y a du niveau 😏bravo et comme c'est la première que je regarde je vais faire un tour avant de demander un thème déjà abordé 🎯

[@victoiremoreal5487]

Merci beaucoup pour tes vidéos, mes cours de UX/UI ne sont pas assez complet, on nous demande d'utiliser que Figma mais on ne nous explique pas comment l'utiliser tu viens de sauver la vie à l'entièreté de la promo 😄

[@arthurvienot6840]

Même chose pour ma pars, bien dommage d'ailleurs ce logiciel est juste incroyable

[@Cyrill770]

Salut Micka, je tenais à te remercier pour ce format tuto, je suis graphiste adobe depuis plus de 25ans en pleine reconversion pro vers le web dev, je suis actuellement en formation en mode bootcamp, mais on a fait que survolé la partie figma, je suis frustré quand je vois tout ce qu'on peu faire avec figma car totalement perdu et moi qui je suis sensible à l'aspect graphique et l'animation des projects, je dois dire que ton aide m'apporte beaucoup. Donc si tu te poses la question si tu continue ou non à faire des tutos comme celui-ci, ben n'hésites pas je suis preneur. Dernière chose, je suis fan de ton format que ce soit sur les tutos ou tes vidéos en général, le narratif explicatif j'adore, ne laches rien t'es une bombe

[@mickadoule]

Merci beaucoup Cyrill, malheureusement j'ai mis un peu en pause les tutos pour des concept un peu plus grand public. Mais je suis sur que tu trouveras ton bonheur. Bon courage pour ta reconversion

[@kRaaZyCow]

Je viens de tomber sur la vidéo je découvre des fonctionnalités que je connaissais pas du tout ! J'aimerai bien un petit tutosur tout les aspect styles, variables, gestion des assets et des dossier (les icons/xyz, les menu=xyz etc), vraiment tout ces petits aspects qui simplifient de fou la vie (et que j'ai pas appris en école mdrr)

[@mickadoule]

Très bonne idée ! Y’a beaucoup de chose à dire. Je sais pas si le format KZbin serait la meilleure solution mais je pense parfois à faire un mega tuto. Peut être un jour

[@kRaaZyCow]

@@mickadoule clairement ! j'ai découvert ça dans ta vidéo, je vais me renseigner sur comment bien utiliser et créer les variables etc donc si ça sort sur ta chaîne ou ton site je saute dessus

[@noeldossou-yovo3307]

Merci beaucoup pour ce tuto @mickadoule J'adore le nouveau format de tes vidéos.

[@mickadoule]

Hey merci beaucoup, c'est encourageant

[@eliegouzou8283]

hello M. Mickadoule Félicitation pour ton travail j'aime vraiment ta pédagogie , est ce que c'est possible d'aborder le sujet sur les livrables ( je te propose un titre "Réussir sa remise de projet : Guide complet pour impressionner votre client")

[@clement6741]

trop cool ce genre de vidéo 😀

[@mickadoule]

Merci ;) je pense en faire d'autres dans le genre

[@celiasalignat-plumasseau4896]

J'aime beaucoup cette animation et l'explication qui va avec.

[@benjaminroquet]

Merci ! Stylé ce menu nav bar ..... et bien joué pour la matière . Je m'abonne ;)

[@TEVprod]

Super vidéo ! 👍🏻

[@TheEnenda]

Bravo, j'adore tes videos ! merci Bro ;)

[@mickadoule]

Merci à toi 😁

[@toto_videos]

Coolix le tuto. J'aurais fait le composants fond actif pour pas à avoir à modifier 4 fois :P

[@zaldanbeats2451]

Super ! Merci à toi pour ce tuto. Ça va faire du bien à mes maquettes, plein de petits tips que j'ai pas l'habitude d'utiliser comme ça et qui donnent de l'organisation. J'adore tes formats, ils sont top, il y a toujours des choses à prendre. Donc si tu te demandes s'il faut continuer, pour moi c'est oui ! (Je verrai bien un tuto sur l'animation d'une frame généré par le scroll, du type de la page iMac 24" sur le site d'apple)

[@mickadoule]

Merci 🙏 content que ça puisse vous aider. Pas mal la suggestion. Je me demande si c'est possible avec Figma. Peut être pas au scroll mais avec 2 frame et une vidéo pour simuler le scroll peut être

[@gabrielfoulon4523]

Trop bon tuto, très intéressant, un tuto pour les dimensions et règles pour faire un app smooth responsive bien ux!

[@mickadoule]

Merci Gabriel, effectivement une vidéo plutôt attendu j'ai l'impression. Y'a un sujet interessant à faire ;)

[@lylio1784]

j'aime cette idée de tuto ! Et ne te décourage pas trop vite si jamais les vues ne sont pas au rdv, pour les tutos les vues se font sur le long terme ! (je dis pas que c'est le seul critère qui t'intéresse quand tu fais une vidéo évidemment...)

[@mickadoule]

Hey merci pour l'encouragement, oui j'en suis conscient, mais d'un autre coté ça me permet de faire plus de vidéo donc c'est cool

[@alycamara9189]

merci je veux un tuto complet sur figma mais un peu lent surtout quand vous faites des operations !

[@nicolasarfel9770]

Le sujet est top. L'idée de faire des tutos n'est pas innovante mais ta manière d'expliquer est beaucoup plus pédagogique que d'autres ! Mon seul bémol serait que je t'ai découvert avec un ton humoristique qui me plaisait énormément et je ne le retrouve plus ... Cela ajoutait une note de fun que je regrette dans celle ci!

[@mickadoule]

Merci Nicolas, oui tu as raison, je vais essayer de garder quelques blagues par ci par la ;)

[@mathieudom2793]

c'est bon ytb préférer

[@orlaneesthesie6142]

Bonjour, ce serait super si vous pouviez noter les raccourcis clavier que vous utilisez hihi merci pour la vidéo (je suis en train de la suivre et je galère à trouver comment dupliquer un élément: j'ai l'impression que c'est un raccourci clavier mais je ne le trouve pas sous windows :') )

[@normanocra]

Bonjour, merci pour le tuto très cool. J'ai juste une question, pour développer le "grain" ensuite, ça se passe comment ? ^^

[@laurentjoly7759]

Bon travail micka. Par contre, au niveau dev c'est du boulot mais ça vaut le coup

[@nathanmichelland421]

Salut ! Super vidéo, très bien expliquée, même pour un débutant comme moi. En revanche, une fois le menu nav fini, comment le connecter avec les différentes frame d’une maquette d’application mobile ? Merci

[@mickadoule]

Tu dois te rendre sur l'onglet prototype en haut a droite

[@Le_Voyageur.]

Salut Mickadoule , j'espere que tu vas bien , moi ca va super . J'ai suivi tes indications jusqu'à 5:45 , lorsque tu met tes icons en couleurs sauf que en faisant cela , le label n'apparait pas en blanc , et tu a cut à ce moment là . Du coup , j'aimerais savoir ce que t'as fait ? Merci et bonne continuation

[@Le_Voyageur.]

En fin de compte , j'ai re fait ce que tu as fait avec les icons mais en mettant les labels aussi

[@mickadoule]

Ca va super merci :) c'est juste que le label n'avais pas la même couleur que les icons. Les icons était en dark donc dans un style et le label en #000000

[@WillsDe]

Comment faire de l'export de ta création pour l'integrer a une page web, merci!

[@RaquelRodriguez-cr8pl]

Avant tout merci pour les tutoriels. Une petite question, c'est normal que quand je fais l'essai je peux cliquer que une seule fois ? Peut être j'ai sauté une page. Merci d'avance de votre réponse

[@dimiandriamahaleo7008]

Bjr! est ce qu'on peut importer ce design dans python tkinter?

[@mickadoule]

Oula bonne question mais je suis pas assez calé pour te répondre

[@djemaikatia5999]

J'arrive pas à trouver la touche inspect à côté de prototype 😢

[@normanocra]

Ca n'existe plus. L'inspecteur est maintenant dans le dev mode qui est accessible avec un compte payant.

[@franckngoubounkou9930]

c est quand meme vous qui avez creer figma 🤧j en reviens pas sur votre powerfull .

[@mugcarnivore2493]

C est étonnant, mais la forme et le ton de tes tuto a changée par rapport aux premières vidéos ; plus brut, moins sympa je trouve. Il n'en reste pas moins que le contenu est toujours de qualité et intéressant et puis tes tuto ne sont pas trop speed contrairement à d'autres (BastiUI, JessUI…). En tout cas, continue d'en faire, je suis preneur. Si tu peux remettre un peu de forme comme à tes débuts je suis preneur aussi, même si j imagine que c est plus chronophage et fastidieux à faire. En revanche tout le monde parle de Figma pour faire des maquettes, design system, micro interactions/animations etc, mais peu/pas ne parle de l'étape de récupération de maquettes/animations pour l'intégration dev. A croire aussi que la majorité des sites sont pondus sans utiliser de frameworks comme Bootstrap, MudBlazor et autres, ce qui vient limité le champ d'action de Figma puisque tous les composants sont prêts. Quid d'une vidéo sur la concurrence dont personne ne parle comme Justinmind, Visily, etc ? Du coup de plus en plus les videos sur Figma ressemble à des tutos Flash (RIP petite horreur partie pas assez tôt). Peu de vidéos non plus sur la partie collaborative et communauté. Récap de ce que j aimerais te voir aborder : - De la théorie et bonnes pratiques sur Figma/UX (grilles, dimensions mobile/tablettes/desktop), couleurs, tokens - L'aspect collaboratif et communautaire de Figma - Le design system comment en faire un, par ou commencer, la notion atome/molécules etc… - La partie manquante du processus dans Figma, l'export pour l'intégration. - Le responsive (que tout le monde confond avec le flex) - La concurrence moins connue. - Les appli/sytem no code qui fonctionnent comme Figma Force et robustesse à toi et plein de bisous 😉

[@mickadoule]

Hey merci pour ce retour ultra complet Pour la forme, effectivement c'est une vidéo qui m'a pris beaucoup moins de temps que les autres. Le deffit était d'en faire une sur une journée. J'ai moins de temps actuellement. Mais peut être que je vais travailler un peu plus la forme sur les prochaines. Je comprend tout à fait ton point par rapport aux tutos Figma qui manquent de profondeur. Cela dit c'est pas évident de faire des sujet complet avec style guide et intégration dev. C'est peut être un sujet pour une grosse vidéo qui demanderais du temps. Je ne sais pas si j'ai le temps de m'y pencher pour le moment mais je garde ça en tête ;)