Dropdown Menu with Scroll Animation | Figma Interactive Components

Рет қаралды 21,694

Күн бұрын

In this tutorial, I will show you how to make Dropdown Menu with Scroll Animation in Figma with Interactive Components. Also, you will learn how to make an Overlay Menu to show a animated scrollable list using Scroll Bar and how to make Dropdown Selection Animation with Components, Variants, Figma Prototype and Figma Animation.
In this video I show you:
00:00 Intro
00:41 Dropdown Button
02:21 Overlay Menu
04:05 Scroll Bar
05:27 List View
06:10 Dropdown Menu Variant
06:25 Scroll Animation
06:51 Dropdown Selection Animation
07:45 Create Multiple Components
08:03 Combine as Variants
08:12 Prototype
======
Watch my others Figma Interactive Components tutorials:
Progress Bar Button: • Download Progress Bar ...
Animated Heart Icon: • Figma Animated Heart I...
Animated Swipe to Delete: • Figma Swipe to Delete ...
Floating Action Button (FAB): • Floating Action Button...
Animated Like Button: • Animated Like (Heart) ...
Search Bar (Keyboard Input Animation): • Search Bar (Keyboard I...
Loading Animation: • Loading Animation | Fi...
Interactive Star Rating: • Figma Star Rating Anim...
Interactive Slider: • Figma Slider Animation...
Interactive Button: • Figma Interactive Butt...
Radio Buttons: • Figma Interactive Comp...
Checkbox: • Checkbox | Figma Inter...
Dropdown Menu: • Figma Dropdown Menu Tu...
Input Fields: • Figma Interactive Comp...
Progress Bar: • Figma Progress Bar Tut...
Toggle Switch Button: • Figma Toggle Switch Bu...
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials.

Пікірлер: 28

@celeara8862 6 ай бұрын

Thank you so much for this!! Been trying to get this done for ages and you made it so simple! 🤩

@ChinskDesign 6 ай бұрын

Hi!😃 Thank you so much for the feedback! Comments like this motivate me to keep posting more tutorials!🤩 What do you want to learn next? Have a great week!

@ramazanguler6066 6 ай бұрын

clear and useful, thank you for best lesson about figma variant and interactive components

@ChinskDesign 6 ай бұрын

Hi!😃 Thank you very much for the feedback!I’m glad to hear this. Comments like this motivate me to keep posting more tutorials.🤩 What do you want to learn next? Have a great week!

@Spicyhealthyblog 12 күн бұрын

Please sir thank you for ypou videos they're all helpful, please try to add write up so we can see what you selected like numbers you use thank you.

@balogunoluwapamilerin942 Жыл бұрын

I used this to create a dd/mm/yyyy picker and it worked perfectly! You are one of the BEST, thank you.

@ChinskDesign Жыл бұрын

Great use! Glad to help!🤩 Thank you so much for sharing knowledge and watching the videos! Have a great week!😃

@simonlarragy9376 Жыл бұрын

Another fantastic video. When you are creating this component is it necessary to clip the word music at the bottom for the smart animate drag to work? I notice you did something similar on the carousel video. Many thanks again.

@onkargund Жыл бұрын

Thank you so much 😄 literally i was looking for this, finally i got this 🤗 again thank you..

@ChinskDesign Жыл бұрын

Glad to help!🤩 Thank you so much for the feedback! Which tutorial do you want to see here on the channel? Have a great week!

@onkargund Жыл бұрын

@@ChinskDesign it will be better if you give tutorials on Adobe XD components 🤗

@ChinskDesign Жыл бұрын

Nice! I will work on it 😀

@ikennagibson3933 Жыл бұрын

Nice video 👏🏻

@ChinskDesign Жыл бұрын

Thanks so much for appreciating! 😃 Have a great week!

@saktisekali1870 Жыл бұрын

thanks

@ChinskDesign Жыл бұрын

Glad to help!🤩 Thank you so much for watching!😃

@mathildeguillaume2421 Жыл бұрын

You save me !!

@ChinskDesign Жыл бұрын

Hi!😃 I’m glad to help!🤩 Thank you so much for watching! Which tutorial do you want to see here on the channel? Have a great week!

@jieun_gu77 Жыл бұрын

Hello!! I was wondering if you’ve used any shortcuts to see the distance between the scroll bar and the frame at 4:35? Thanks 😆

@abdallahsaeed8134 Жыл бұрын

select the layer u wanna see the distance between other layers and click " alt " in ur keyboard

@jieun_gu77 Жыл бұрын

@@abdallahsaeed8134 thank you!!

@gracechuang125 Жыл бұрын

Love this tutorial! It worked but my Choose Topic frame becomes semi transparent when I scroll. Do you know why?

@ChinskDesign Жыл бұрын

Hi!😃 Thank you so much for the feedback!🤩 Did you fill in the Choose Topic frame?

@ChinskDesign Жыл бұрын

Hi Grace! Did it work?

@gracechuang125 Жыл бұрын

@@ChinskDesign no :( My frame is filled, not sure what the problem is.

@ChinskDesign Жыл бұрын

Hi!😃 Did you select in the right panel “clip content” for the frame? Don't worry, I will help you🙂

@sorianoariadna7775 Жыл бұрын

Merci !

@ChinskDesign Жыл бұрын

Merci beaucoup! 🤩🙏