Dropdown Menu with Scroll Animation | Figma Interactive Components

Подписаться 6 тыс.

Просмотров 22 тыс.

50% 1

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.

Наука

Опубликовано:

6 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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!

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

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

@Spicyhealthyblog 19 дней назад

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.

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

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

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

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