Dropdown Menu with Scroll Animation | Figma Interactive Components

Ғылым және технология

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

  • @Spicyhealthyblog
    @Spicyhealthyblog10 күн бұрын

    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.

  • @celeara8862
    @celeara88626 ай бұрын

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

  • @ChinskDesign

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

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

  • @ChinskDesign

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

  • @onkargund
    @onkargund Жыл бұрын

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

  • @ChinskDesign

    @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

    @onkargund

    Жыл бұрын

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

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Nice! I will work on it 😀

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

  • @ikennagibson3933
    @ikennagibson3933 Жыл бұрын

    Nice video 👏🏻

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

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

  • @saktisekali1870
    @saktisekali1870 Жыл бұрын

    thanks

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

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

  • @mathildeguillaume2421
    @mathildeguillaume2421 Жыл бұрын

    You save me !!

  • @ChinskDesign

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

    @abdallahsaeed8134

    Жыл бұрын

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

  • @jieun_gu77

    @jieun_gu77

    Жыл бұрын

    @@abdallahsaeed8134 thank you!!

  • @gracechuang125
    @gracechuang125 Жыл бұрын

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

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

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

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Hi Grace! Did it work?

  • @gracechuang125

    @gracechuang125

    Жыл бұрын

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

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

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

  • @sorianoariadna7775
    @sorianoariadna7775 Жыл бұрын

    Merci !

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Merci beaucoup! 🤩🙏

  • @balogunoluwapamilerin942
    @balogunoluwapamilerin942 Жыл бұрын

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

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

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

Келесі