Dropdown Menu with Scroll Animation | Figma Interactive Components
HTML-код
- Опубликовано: 13 июн 2024
- 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. - Наука
Thank you so much for this!! Been trying to get this done for ages and you made it so simple! 🤩
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!
clear and useful, thank you for best lesson about figma variant and interactive components
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!
Thank you so much 😄 literally i was looking for this, finally i got this 🤗 again thank you..
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!
@@ChinskDesign it will be better if you give tutorials on Adobe XD components 🤗
Nice! I will work on it 😀
I used this to create a dd/mm/yyyy picker and it worked perfectly! You are one of the BEST, thank you.
Great use! Glad to help!🤩 Thank you so much for sharing knowledge and watching the videos! Have a great week!😃
Nice video 👏🏻
Thanks so much for appreciating! 😃 Have a great week!
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.
thanks
Glad to help!🤩 Thank you so much for watching!😃
You save me !!
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!
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 😆
select the layer u wanna see the distance between other layers and click " alt " in ur keyboard
@@abdallahsaeed8134 thank you!!
Love this tutorial! It worked but my Choose Topic frame becomes semi transparent when I scroll. Do you know why?
Hi!😃 Thank you so much for the feedback!🤩 Did you fill in the Choose Topic frame?
Hi Grace! Did it work?
@@ChinskDesign no :( My frame is filled, not sure what the problem is.
Hi!😃 Did you select in the right panel “clip content” for the frame? Don't worry, I will help you🙂
Merci !
Merci beaucoup! 🤩🙏