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:

======

Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials

[postal]

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

[andrearodriguezojeda]

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

[arianemoki]

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.

[iberco]

Thank you very much, you save my life!

[anukrititripathi]

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

[ExpectZombiesHD]

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

[aliciad]

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

[yanxiao]

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

[zejgxgw]

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.