Animated Dropdown Menu with Variants in Figma (2022 Update)

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 96

  • @bargainwebsitedesign
    @bargainwebsitedesign ปีที่แล้ว +13

    You need to ensure that in the interaction between Close (Item 1) and Open (Item 1) that "Reset component state" is ticked. Without this your Active state will not appear in the drop down list. Otherwise a great video. Thank you.

    • @hikayatalflila178
      @hikayatalflila178 ปีที่แล้ว +4

      Thank you so much for your comment you saved my day ...i was struggling to do it .

    • @sudharsansundar6295
      @sudharsansundar6295 ปีที่แล้ว +4

      Pin this comment, i wasted 2 days for this

    • @carloslafa8092
      @carloslafa8092 ปีที่แล้ว +2

      I have tried 3 different tutorials but never worked for me the active state, works only if I remove the hover state.I really don't understand what's going on.

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      thanks for this! sorry ya'll!

    • @donGarritz
      @donGarritz 10 หลายเดือนก่อน

      @@carloslafa8092 I ended up using “mouse enter” and “mouse leave” interactions instead of “while hovering”… that did the trick to get a functional hover

  • @karen1995298
    @karen1995298 ปีที่แล้ว +2

    I am a graphic designer trying to switch into UI design. Your videos are really super easy to follow, especially for ppl like me who needs the basics of web design. The best channel I've watching for the past months, clear and straight to the point! I am currently trying to finish all the videos you've created so far. Thank you so much!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      Karen, this makes me so happy to hear! I’m seeing more and more graphic designers watching my content, and the fact that it resonates so well with someone coming from that world is amazing to hear. thank you for sharing this with me!! 🥳🙏

  • @MalcanniPlus
    @MalcanniPlus 2 ปีที่แล้ว +2

    I love your videos. They're straight to the point! Thank you so much!

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      appreciate it, Ifoghale 🙏🥳 thank you for commenting!

  • @TimGabe
    @TimGabe  2 ปีที่แล้ว +4

    Link to the Figma file if you want to follow along 💜
    www.figma.com/file/DJaK3aEvioK9BqWExjQhQ8/Animated-Dropdown-Menu?node-id=0%3A1

    • @feelcollins4358
      @feelcollins4358 ปีที่แล้ว

      Nested component variants really frustrate me, I did as shown in the vid and even checked the file to see if anything was different down to the link interactions but they're all the same yet somehow the preview ends up different.
      In my preview when I pressed the "Closed (no pick)" and arrived at the "Opened (no pick)", it does a little animation where the dropdown list pushes the container up whereas yours remain fixed in place. There's another problem where when I pressed "Closed (item 1)" which then arrives at "Opened (item 1)", the Active state (Menu Item 1 in the dropdown list) aren't shown despite literally being there inside my components.
      I'm thinking the problem lies with Figma, maybe they've updated the component system in the last 10 months and it changed how things used to work? Please let me know if this happens to you if you try to recreate this again in recent times.
      Thank you.

  • @Rep1nS
    @Rep1nS ปีที่แล้ว +1

    Finally, no missing steps. Thanks!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      awesome to hear, Stanislav!!

  • @OloyedeAdebimpe
    @OloyedeAdebimpe 2 ปีที่แล้ว +2

    This is the most helpful TH-cam channel ever! Thanks Tim

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      such a nice comment, Oloyede!! thank you 🙏🥳

  • @Imran-ob3br
    @Imran-ob3br 10 หลายเดือนก่อน +1

    hey Tim, just wanted to say your content is amazing. I want to start my ux career and have been binge watching all your videos, looking forward to the course you will drop. Just hope its not too pricey :)

  • @hautewire
    @hautewire 2 ปีที่แล้ว +1

    i've had nothing but trouble w variants. esp watching tutorials and meanwhile figma changed their interface ... thought i was crazy(ier)! glad to find this amd that you have a file to work from. maybe this'll finally help.
    you go kinda fast from objects to components to variants. that's what gives me most trouble... naming them and stuff... then it's all problems after.
    i'm an ui animator so i really want to get this down.
    usually i speed up videos to 1.25-1.5 speed, but with yours i have to go back to review.
    thanks

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว +1

      that’s great feedback, my friend. always thought my pacing was too slow, so doing my best to keep the tempo up. 🙏 I hope that this video (or my other videos on the topic) will help you find your way around variants, it’s really powerful once you grasp it 🤗

  • @grundeeno5790
    @grundeeno5790 ปีที่แล้ว +1

    At 4:37 how did you combine those components? Just grouping them, framing them, or something else?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      great question! so I actually added an auto layout to group them, then I made a component out of that auto layout 🤩

    • @grundeeno5790
      @grundeeno5790 ปีที่แล้ว

      @@TimGabe Thanks! My other question is if I wanted to make multiple dropdowns with different content, could I just copy the entire component set and change the text? or do I have to make it from scratch.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      @@grundeeno5790 you can add component properties, or more specifically a text property. I talk about it in this video:
      Figma Component Properties made SIMPLE (Variants, Boolean, Text, Instance)
      th-cam.com/video/iaQ30m6gqhw/w-d-xo.html

  • @timothyduke
    @timothyduke ปีที่แล้ว +1

    Finally i have been able to do this.
    I must confess you’re the best teacher in this field. The simplicity is so powerful

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that’s such a nice comment, Timothy 🙏 thanks a lot man!!

  • @honeylavender1122
    @honeylavender1122 ปีที่แล้ว +1

    What if you have this drop down in a form and you want to demonstrate it opening and showing the list - but when I do - it pushes all the other components down :/ Is there a way to tell it to be an overlay?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      maybe time for a more advanced tutorials on this topic!
      something for the future...

  • @inuyasha561
    @inuyasha561 ปีที่แล้ว

    this was the only one that worked for me like i wanted it you explained it very beautifully, thanks you Tim

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's great to hear. thank you for commenting!

  • @АняШкляр
    @АняШкляр ปีที่แล้ว +1

    Thanks for the video. Not everything worked out for me. Hover works in dropdown list and active item doesn't work in list.
    I noticed that when the hover is removed from menu item component, the active item works in the list and the hover does not work. What is the error? Thank you!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      not sure what the issue is without seeing the problem, i'm afraid... also simply too many comments for me to get into details nowadays 😫 but i'm launching paid mentoring on my upcoming website (timgabe.com) if you want to chat about things like this!

  • @piotrkarp9562
    @piotrkarp9562 2 ปีที่แล้ว +1

    Finally, after like 10 of these I was able to follow it through without any difficulties. Man, thanks! Srsly, you helped me alot. You have gift of teaching. And it's rare one/

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      that’s so cool to hear, Piotr. comments like these truly mean something to me, so thanks a lot for taking the time to write it 🤩🙏

  • @cosmiqdesigner
    @cosmiqdesigner 2 ปีที่แล้ว +2

    Quick, easy and on point. Thanks for this great tutorial.

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว +1

      appreciate it, my friend. 🙏🤩

  • @hugocondori7262
    @hugocondori7262 5 หลายเดือนก่อน

    yes but What im looking for how it works in context Im having a problem with text that hides the options of dropdown :/ I dont how to fix this.

  • @JanThomassen-x5q
    @JanThomassen-x5q 4 หลายเดือนก่อน

    What to do if you want the dropdown to be triggered while hovering? When I try that instead of "pressing", the sub-menu vanish when I leave the main button area even though I do not have any hover-state on the main button..
    /Solved
    It worked when I used "Mouse enter" instead of hover combined with "Mouse leave"

  • @Djerique
    @Djerique 6 หลายเดือนก่อน

    Is there also a workfile for this tutorial available?

  • @OfficialNXNETYNINE
    @OfficialNXNETYNINE ปีที่แล้ว

    Great video...seeing this at 2am, by the time I wake up later I'm definitely watching the whole series

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's awesome to hear, my friend!!

  • @okechukwukosi7301
    @okechukwukosi7301 ปีที่แล้ว

    Hello. Please, what do you do when you want to prototype?. It keeps asking for frames and when i select that, it displays the showing the entire component. Help!

  • @aliaaabdelrahaman5698
    @aliaaabdelrahaman5698 ปีที่แล้ว +1

    best illustration man excellent job! thank you finally I was able to do it perfectly.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      happy you liked it, Aliaa!!

  • @josephquine2892
    @josephquine2892 ปีที่แล้ว +1

    Very clear, very systemic. A big thumb. Is it possible to publish in full on a real application, such as creating the figma sidebar menu?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much for the kind comment, Joseph 🤩 unfortunately you can't really export this into coded components straight from Figma unless you use an external builder like Framer or Anima

  • @fblytics
    @fblytics ปีที่แล้ว +1

    Hi Tim great video. Is there a way to dynamically add fields to the dropdown menu? For example, if I had to create a dropdown with 4 fields instead of 3, would that require me to redo the entire component?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      hey Malte! I'd create a component that includes the max amount of fields you want and then have component properties to change between number of fields 😃

    • @fblytics
      @fblytics ปีที่แล้ว

      @@TimGabe ah makes sense. Thank you!

  • @MiSsNyu731
    @MiSsNyu731 ปีที่แล้ว +1

    This video was what I needed for my project but I'm having a problem... I can´t do the two interactions to combine, either I do the hoover animation or the clicable one -_-

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      you'll have to nest your components!

  • @Jab7kO
    @Jab7kO 2 ปีที่แล้ว +1

    That was quick mate! :D Great video! Thank you!💪

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว +1

      haha, yes! it was in the editing pipeline, so I can't take full credit 😅🥳

  • @Adam-g1f2j
    @Adam-g1f2j ปีที่แล้ว +1

    Current variant isn't showing on any of the instances that I create from the main. I have to detach all instances then create a parent frame component, can you help??

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      did you get this to work eventually? 😃

    • @Adam-g1f2j
      @Adam-g1f2j ปีที่แล้ว

      @@TimGabe Eventually is the most suitable word!! Thanks!

  • @UnlockWave
    @UnlockWave 11 หลายเดือนก่อน +1

    hovering and click not working only one interaction work when i add hover to it the active state gone

    • @TimGabe
      @TimGabe  11 หลายเดือนก่อน

      check the pinned comment!!

  • @kipfitpal
    @kipfitpal 13 วันที่ผ่านมา

    How did you make that nice background image?

  • @lemoniamicha7443
    @lemoniamicha7443 ปีที่แล้ว +1

    Excellent work! Thank you!!

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      thank you Lemonia!! 🙏

  • @DeniTosh
    @DeniTosh ปีที่แล้ว +1

    I needed this last week :) Great video by the way.
    Just one question is it possible to have more intereactions on same item?
    For example if I click the second item to change the name in the dropdown but also to open an overlay as well?

    • @TimGabe
      @TimGabe  ปีที่แล้ว +1

      hey Deni! yes, but you would have to create a main component with an interaction, then grab an instance of it, create a new component and then create the second interaction on that 👌

  • @dievas_
    @dievas_ 2 ปีที่แล้ว +1

    Great stuff as always! Very helpful!

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      happy you liked it, Šaras!! 🥳

  • @canva_sation
    @canva_sation ปีที่แล้ว

    Great video! I've a question: say I have 2 dropdown boxes and 1 button. (Point to note is that the dropdown boxes have 6 selections each). How I want these components to operate is, Once both dropdown box A and B have been selected by the user no matter which selection, the button is to appear. So dropdown box A + dropdown box B = button appear
    I need assistance 🙏

  • @claudiocut
    @claudiocut 2 ปีที่แล้ว +1

    Keep up the great work man. Amazing content 👊🏻

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      thank you so much, Claudio! 🙏 delighted that you liked the video!

  • @mateusjosemilczewskialvesf4166
    @mateusjosemilczewskialvesf4166 ปีที่แล้ว +1

    maybe, with de variables this can be more even easier... tks for the video, Tim!

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      happy to share my knowledge, mateus!

  • @sayekatchakraborty2552
    @sayekatchakraborty2552 2 ปีที่แล้ว +2

    Thank you so much, bro.. Need some videos on input forms interactions. It will be a great help to learn from you. As always, Your explanation just cleared the base concept.

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว +1

      always appreciate your nice comments, Sayekat! 🙏 will take note on this!! 🤩

  • @pavantodupunuri2562
    @pavantodupunuri2562 ปีที่แล้ว +1

    With latest beta release from Figma, this could be achieved with variables, eliminating the need for creating multiple instances.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      very true!

  • @екатеринамаврицкая-и6ф
    @екатеринамаврицкая-и6ф 7 หลายเดือนก่อน

    I am broken on the stage when you create the first menu item. Just grab a text a pull it down doesnt work for me((

  • @rigidhammer7376
    @rigidhammer7376 9 หลายเดือนก่อน

    how about putting some variables to save space

  • @imeuboh7739
    @imeuboh7739 ปีที่แล้ว +1

    Thanks a lot, especially for the Easy explanation, I got it on my first try ❤❤

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      that's awesome to hear!! thank you for supporting 😃

  • @carloslafa8092
    @carloslafa8092 ปีที่แล้ว

    Thanks for that great tutorial but one more time I have the same issue between the hover state and the active one, so the active state doesn't work every time that my component has a hover. Btw i downloaded your file to check and everything looks the same.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      hard to say without seeing it, sorry about that 😫

  • @iamdciax2
    @iamdciax2 ปีที่แล้ว +1

    Thanks for this.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      happy to be of help!!

  • @nar1708
    @nar1708 6 หลายเดือนก่อน

    I did everything but in the end when I place it to another frame to see if ot works it doesn't 😭

  • @amangupta1387
    @amangupta1387 ปีที่แล้ว +1

    This is so worthy tutorial

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      thank you so much!

  • @thaongannguyen7027
    @thaongannguyen7027 2 ปีที่แล้ว +1

    This video is awesome and super helpful. Thanks for sharing 👏

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      makes me very happy that you liked it, Thao! 🤩

  • @khaledmohammadrakib
    @khaledmohammadrakib 3 หลายเดือนก่อน

    thanks..... very helpful

  • @andynonimuss6298
    @andynonimuss6298 4 หลายเดือนก่อน

    Sorry man, this seems like the long way around with too much duplication. Wouldn't an open overlay interaction be easier with the overlay containing it's on component states?

  • @MrIkesimba
    @MrIkesimba ปีที่แล้ว +1

    "...and I'll just give it an opacity like that..." Like WHAT?!?! WTF did you do?
    "...I'll combine it into a dropdown list..." HOW?!?! Did you make an auto layout? That's what it seems like, but if that's the case then how are you rounding the corners, because that doesn't work.

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      for the first question: using keyboard keys (0-9) you can pick opacities quickly!

  • @tokyobizkit6844
    @tokyobizkit6844 ปีที่แล้ว +1

    you are so handsome. Why should you be an actor if you are a designer?

    • @TimGabe
      @TimGabe  ปีที่แล้ว

      haha, thank you so much!! that's very nice of you to say! 🙏

  • @gabrielaturkie5665
    @gabrielaturkie5665 2 ปีที่แล้ว +1

    I hope it didn't explode

    • @TimGabe
      @TimGabe  2 ปีที่แล้ว

      no explosions! 😂🙏