Animated Dropdown Menu with Variants in Figma (2022 Update)

Create realistic prototypes with the simple 3-step technique taught in this video.

📕 Show Notes 📕

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!

[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.

[karen]

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!

[OloyedeAdebimpe]

This is the most helpful Youtube channel ever! Thanks Tim

[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

[Imran-obbr]

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

[piotrkarp]

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/

[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

[JabkO]

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

[cosmiqdesigner]

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

[imeuboh]

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

[OfficialNXNETYNINE]

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

[aliaaabdelrahaman]

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

[claudiocut]

Keep up the great work man. Amazing content 👊🏻

[inuyasha]

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

[MalcanniPlus]

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

[sayekatchakraborty]

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.

[mateusjosemilczewskialvesf]

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

[thaongannguyen]

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

[АняШкляр]

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!

[josephquine]

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?