Animated Dropdown Menu with Variants in Figma (2022 Update)

Рет қаралды 38,424

Күн бұрын

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!

Пікірлер: 90

@bargainwebsitedesign Жыл бұрын

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 11 ай бұрын

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

@sudharsansundar6295 10 ай бұрын

Pin this comment, i wasted 2 days for this

@carloslafa8092 7 ай бұрын

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 7 ай бұрын

thanks for this! sorry ya'll!

@donGarritz 4 ай бұрын

@@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 Жыл бұрын

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 Жыл бұрын

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!! 🥳🙏

@ifouzezi Жыл бұрын

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

@TimGabe Жыл бұрын

appreciate it, Ifoghale 🙏🥳 thank you for commenting!

@Imran-ob3br 4 ай бұрын

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

@piotrkarp9562 Жыл бұрын

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 Жыл бұрын

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 🤩🙏

@Jab7kO Жыл бұрын

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

@TimGabe Жыл бұрын

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

@timothyduke Жыл бұрын

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 Жыл бұрын

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

@cosmiqdesigner Жыл бұрын

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

@TimGabe Жыл бұрын

appreciate it, my friend. 🙏🤩

@claudiocut Жыл бұрын

Keep up the great work man. Amazing content 👊🏻

@TimGabe Жыл бұрын

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

@OloyedeAdebimpe Жыл бұрын

This is the most helpful KZfaq channel ever! Thanks Tim

@TimGabe Жыл бұрын

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

@dievas_ Жыл бұрын

Great stuff as always! Very helpful!

@TimGabe Жыл бұрын

happy you liked it, Šaras!! 🥳

@Rep1nS Жыл бұрын

Finally, no missing steps. Thanks!

@TimGabe Жыл бұрын

awesome to hear, Stanislav!!

@sayekatchakraborty2552 Жыл бұрын

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 Жыл бұрын

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

@aliaaabdelrahaman5698 Жыл бұрын

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

@TimGabe Жыл бұрын

happy you liked it, Aliaa!!

@inuyasha561 7 ай бұрын

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

@TimGabe 6 ай бұрын

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

@lemoniamicha7443 Жыл бұрын

Excellent work! Thank you!!

@TimGabe Жыл бұрын

thank you Lemonia!! 🙏

@thaongannguyen7027 Жыл бұрын

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

@TimGabe Жыл бұрын

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

@hautewire Жыл бұрын

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 Жыл бұрын

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 🤗

@imeuboh7739 8 ай бұрын

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

@TimGabe 8 ай бұрын

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

@OfficialNXNETYNINE 9 ай бұрын

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

@TimGabe 9 ай бұрын

that's awesome to hear, my friend!!

@mateusjosemilczewskialvesf4166 7 ай бұрын

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

@TimGabe 7 ай бұрын

happy to share my knowledge, mateus!

@TimGabe Жыл бұрын

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

@feelcollins4358 11 ай бұрын

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.

@iamdciax2 11 ай бұрын

Thanks for this.

@TimGabe 8 ай бұрын

happy to be of help!!

@DeniTosh Жыл бұрын

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 Жыл бұрын

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 👌

@startswithAendswithE 11 ай бұрын

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 🙏

@josephquine2892 Жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

@@TimGabe ah makes sense. Thank you!

@amangupta1387 11 ай бұрын

This is so worthy tutorial

@TimGabe 8 ай бұрын

thank you so much!

@MiSsNyu731 7 ай бұрын

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 7 ай бұрын

you'll have to nest your components!

@user-km7ov3zs4s 11 ай бұрын

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 11 ай бұрын

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!

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

@Djerique 5 күн бұрын

Is there also a workfile for this tutorial available?

@pavantodupunuri2562 7 ай бұрын

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

@TimGabe 7 ай бұрын

very true!

@melissaviesca2299 11 ай бұрын

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 8 ай бұрын

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

@hugocondori7262 2 күн бұрын

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.

@grundeeno5790 Жыл бұрын

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

@TimGabe Жыл бұрын

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

@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 Жыл бұрын

@@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) kzfaq.info/get/bejne/n8eBZpOem83VmKs.html

@UnlockWave 5 ай бұрын

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

@TimGabe 5 ай бұрын

check the pinned comment!!

@carloslafa8092 7 ай бұрын

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 7 ай бұрын

hard to say without seeing it, sorry about that 😫

@user-qh8py2li3s Жыл бұрын

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 Жыл бұрын

did you get this to work eventually? 😃

@user-qh8py2li3s Жыл бұрын

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

@rigidhammer7376 3 ай бұрын

how about putting some variables to save space

@user-qd4bu4uk9s Ай бұрын

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

@nar1708 10 күн бұрын

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

@MrIkesimba 10 ай бұрын

"...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 10 ай бұрын

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