Animated Dropdown Menu with Variants in Figma (2022 Update)
HTML-код
- Опубликовано: 13 июн 2024
- Create realistic prototypes with the simple 3-step technique taught in this video.
📕 Show Notes 📕
➡️ Learn How To Master Auto Layout: • Master Figma Auto Layo...
➡️ Learn About The 8-Pt Grid System: • You'll Regret NOT Usin...
➡️ Learn About Interactive Components: • Figma Interactive Comp...
➡️ Learn About Smart Animate: • Figma Smart Animate fo...
➡️ Subscribe To The Channel HERE: / timgabedesign
Timecodes
00:00 - Intro
01:04 - Step 1: Create Atoms
02:38 - Step 2: Add States
04:19 - Step 3: Combine Into Component
#figma #figmatutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
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.
Thank you so much for your comment you saved my day ...i was struggling to do it .
Pin this comment, i wasted 2 days for this
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.
thanks for this! sorry ya'll!
@@carloslafa8092 I ended up using “mouse enter” and “mouse leave” interactions instead of “while hovering”… that did the trick to get a functional hover
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!
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!! 🥳🙏
I love your videos. They're straight to the point! Thank you so much!
appreciate it, Ifoghale 🙏🥳 thank you for commenting!
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 :)
This is the most helpful RUclips channel ever! Thanks Tim
such a nice comment, Oloyede!! thank you 🙏🥳
Quick, easy and on point. Thanks for this great tutorial.
appreciate it, my friend. 🙏🤩
That was quick mate! :D Great video! Thank you!💪
haha, yes! it was in the editing pipeline, so I can't take full credit 😅🥳
Finally, no missing steps. Thanks!
awesome to hear, Stanislav!!
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/
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 🤩🙏
Finally i have been able to do this.
I must confess you’re the best teacher in this field. The simplicity is so powerful
that’s such a nice comment, Timothy 🙏 thanks a lot man!!
Keep up the great work man. Amazing content 👊🏻
thank you so much, Claudio! 🙏 delighted that you liked the video!
Link to the Figma file if you want to follow along 💜
www.figma.com/file/DJaK3aEvioK9BqWExjQhQ8/Animated-Dropdown-Menu?node-id=0%3A1
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.
Great stuff as always! Very helpful!
happy you liked it, Šaras!! 🥳
best illustration man excellent job! thank you finally I was able to do it perfectly.
happy you liked it, Aliaa!!
Excellent work! Thank you!!
thank you Lemonia!! 🙏
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.
always appreciate your nice comments, Sayekat! 🙏 will take note on this!! 🤩
this was the only one that worked for me like i wanted it you explained it very beautifully, thanks you Tim
that's great to hear. thank you for commenting!
This video is awesome and super helpful. Thanks for sharing 👏
makes me very happy that you liked it, Thao! 🤩
Thanks a lot, especially for the Easy explanation, I got it on my first try ❤❤
that's awesome to hear!! thank you for supporting 😃
Great video...seeing this at 2am, by the time I wake up later I'm definitely watching the whole series
that's awesome to hear, my friend!!
Thanks for this.
happy to be of help!!
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
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 🤗
maybe, with de variables this can be more even easier... tks for the video, Tim!
happy to share my knowledge, mateus!
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 🙏
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?
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 👌
This is so worthy tutorial
thank you so much!
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?
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
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!
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?
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 😃
@@TimGabe ah makes sense. Thank you!
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!
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!
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 -_-
you'll have to nest your components!
how about putting some variables to save space
At 4:37 how did you combine those components? Just grouping them, framing them, or something else?
great question! so I actually added an auto layout to group them, then I made a component out of that auto layout 🤩
@@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.
@@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)
ruclips.net/video/iaQ30m6gqhw/видео.html
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((
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?
maybe time for a more advanced tutorials on this topic!
something for the future...
With latest beta release from Figma, this could be achieved with variables, eliminating the need for creating multiple instances.
very true!
hovering and click not working only one interaction work when i add hover to it the active state gone
check the pinned comment!!
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??
did you get this to work eventually? 😃
@@TimGabe Eventually is the most suitable word!! Thanks!
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.
hard to say without seeing it, sorry about that 😫
you are so handsome. Why should you be an actor if you are a designer?
haha, thank you so much!! that's very nice of you to say! 🙏
"...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.
for the first question: using keyboard keys (0-9) you can pick opacities quickly!
I hope it didn't explode
no explosions! 😂🙏