Time Picker Animation | Figma Interactive Components

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

In this tutorial, I will show you how to create Time Picker Animation in Figma with Figma Interactive Components. Also, you will learn how to use Frames, Components, Figma Properties, Variants, Prototype, Smart Animate and Vertical Scrolling.
In this video I show you:
00:00 Intro
00:44 Create Rectangles
02:04 Create Component
02:16 Properties Variant
02:30 Add Variant
02:50 Select Animation Prototype
03:30 Hour and Minute Texts
05:02 Frame Selection
05:22 Create Two Frames
06:25 Frame Within a Frame
08:05 Prototype Vertical Scrolling
======
Watch my others Figma Interactive Components tutorials:
Pulse Animation: • Figma Pulse Animation ...
Animated Countdown: • Animated Countdown Tim...
Dropdown Menu List: • Dropdown Menu with Scr...
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

Пікірлер: 22

  • @postal398
    @postal3982 ай бұрын

    Not so many videos showing how to do that, many thanks to you!

  • @ChinskDesign

    @ChinskDesign

    2 ай бұрын

    Hi!😃 Thank you so much for the feedback! Have a great week!

  • @andrearodriguezojeda746
    @andrearodriguezojeda7466 ай бұрын

    excelente, vi muchos videos y no hay uno mejor explicado que este

  • @ChinskDesign

    @ChinskDesign

    2 ай бұрын

    ¡Hola!😃 ¡Muchas gracias por los comentarios!

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

    Great content. It really helped me with my project. The only thing I would suggest is zooming in where you are hovering. The way it is now is kind of blurry. Keep posting videos, because they are amazing.

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Hi!😃 Glad to help!🤩 Thank you so much for the feedback, I will work on it! Thanks for watching, share our channel with your friends😀 I will keep posting videos every week. Have a great week!

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

    Thank you very much, you save my life!

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Hi!😃 I’m glad to help! Thank you so much for the feedback! Have a great weekend!

  • @iberco91

    @iberco91

    Жыл бұрын

    @@ChinskDesign thank you! U too!

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

    Excellent 👍🏽 Thankyou so much ! I request you to make more

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Glad to help!🤩 Thank you so much for the feedback! Thanks for watching, share our channel with your friends! I will keep posting videos every week😃 Which tutorial do you want to see here on the channel? Have a great week!

  • @anukrititripathi152

    @anukrititripathi152

    Жыл бұрын

    @@ChinskDesign Hey! I am learning ux ui design. I am working on my first case study I found in the process that there are many things/possibility in figma which I am not aware of . I aim to learn and practice to be better in my visual and prototyping skill You are damn good in simplifying things and explaining it. If you can let us more , it will be damn helpful . Thankyou

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    I’m glad to hear that!🤩 Feedback like this makes me motivated to keep making more videos😃 Have a great week and best of luck to you on this study journey😃

  • @user-cf8qx1ve7x
    @user-cf8qx1ve7x Жыл бұрын

    thanks for information 💜

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

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

    Any Chance to make it circular? So that it starts again when you go over 24 hrs / 60 minutes?

  • @aliciad5531
    @aliciad553111 ай бұрын

    Can you please show us how to make this in Adobe Xd? Thank you 😊

  • @yanxiao5286
    @yanxiao528611 ай бұрын

    NEXT TIME PLEASE ADD YOUR VOICE TO EXPLAIN THE TUTORIAL INSTEAD MUSIC, IT'S TO LOUD AND TOO NOISY. MANY THANKS.

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

    I couldn't see anything

  • @ChinskDesign

    @ChinskDesign

    Жыл бұрын

    Hi!😃 Which part of the video do you need help?

  • @user-ze9jg6xg9w
    @user-ze9jg6xg9w Жыл бұрын

    But why you guys don't like to talk when teaching. It just makes people not to wanna click on the video. Not helpful at all.

  • @DerekMckean

    @DerekMckean

    28 күн бұрын

    I understand your perspective. Things may seem ambiguous if you're just moving the mouse in circles. However, due to privacy reasons, they may not want to put their voice on the internet, which is also understandable. However, even if it is indeed the latter, including their bullet points of what they did would be extremely helpful.

Келесі