Comment animer un menu nav bar sur

Поділитися
Вставка
  • Опубліковано 16 кві 2023
  • Ç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

КОМЕНТАРІ • 45

  • @mickadoule
    @mickadoule  Рік тому +3

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

  • @inspireanddesign
    @inspireanddesign 9 місяців тому +2

    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
      @mickadoule  9 місяців тому +1

      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
    @Frederic59236 4 місяці тому

    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é 🎯

  • @celiasalignat-plumasseau4896

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

  • @victoiremoreal5487
    @victoiremoreal5487 5 місяців тому +1

    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
      @arthurvienot6840 2 місяці тому

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

  • @noeldossou-yovo3307
    @noeldossou-yovo3307 Рік тому

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

    • @mickadoule
      @mickadoule  Рік тому

      Hey merci beaucoup, c'est encourageant

  • @benjaminroquet
    @benjaminroquet Рік тому

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

  • @clement6741
    @clement6741 Рік тому +1

    trop cool ce genre de vidéo 😀

    • @mickadoule
      @mickadoule  Рік тому +2

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

  • @TEVprod
    @TEVprod Рік тому

    Super vidéo ! 👍🏻

  • @TheEnenda
    @TheEnenda Рік тому

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

  • @zaldanbeats2451
    @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
      @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

  • @kRaaZyCow
    @kRaaZyCow 7 місяців тому +1

    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
      @mickadoule  7 місяців тому +1

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

    • @kRaaZyCow
      @kRaaZyCow 7 місяців тому

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

  • @gabrielfoulon4523
    @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
      @mickadoule  Рік тому

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

  • @toto_videos
    @toto_videos 6 місяців тому

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

  • @mathieudom2793
    @mathieudom2793 11 місяців тому

    c'est bon ytb préférer

  • @lylio1784
    @lylio1784 Рік тому +1

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

  • @laurentjoly7759
    @laurentjoly7759 2 місяці тому

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

  • @alycamara9189
    @alycamara9189 6 місяців тому

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

  • @normanocra
    @normanocra 3 місяці тому

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

  • @nicolasarfel9770
    @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
      @mickadoule  Рік тому

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

  • @nathanmichelland421
    @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
      @mickadoule  Рік тому

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

  • @RaquelRodriguez-cr8pl
    @RaquelRodriguez-cr8pl 5 місяців тому

    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

  • @WillsDe
    @WillsDe 29 днів тому

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

  • @Le_Voyageur.
    @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.
      @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
      @mickadoule  Рік тому +1

      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

  • @dimiandriamahaleo7008
    @dimiandriamahaleo7008 7 місяців тому

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

    • @mickadoule
      @mickadoule  7 місяців тому

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

  • @franckngoubounkou9930
    @franckngoubounkou9930 3 місяці тому

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

  • @djemaikatia5999
    @djemaikatia5999 10 місяців тому

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

    • @normanocra
      @normanocra 3 місяці тому

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

  • @mugcarnivore2493
    @mugcarnivore2493 Рік тому +2

    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
      @mickadoule  Рік тому +1

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