Creating design protypes

[Rohan_Pinto]

Hello everyone,

I am new to Figma and I was wondering how to make a prototype of my design, including the cursor animations etc. I have attached a template below.
Any help would be greatly appreciated.

Thanks

[Nikhil_R_Sannagoudar]

You will have to create multiple screens to do a prototype. There is a prototype panel where you will get some options. For Example: you will create a rectangle, which moves up and turns into a circle when clicked on or swiped above. For this, you will have to create 2 screens and add prototype elements to it.

[Rohan_Pinto]

Hi, thanks for replying.

Yes I am aware of the prototype panel. I mainly want to know how to make that translucent cursor appear and disappear like that.

Thanks

[Nikhil_R_Sannagoudar]

1. Create 2 frames. Draw a rectangle, just like the cursor.
2. On the first frame, set the opacity of the rectangle to 0%. Whereas, in the next frame set it to 100. Now, you can prototype with the ‘after delay’ option

[Rohan_Pinto]

Sounds good. Thanks
I just have 1 more doubt: How do I get that circle grow+shrink effect like shown below. In the below gif, the left screen has colored circles with a bubble animation. The right screen has a cursor resizing effect.
Can you tell me how such an effect is created?

[Nikhil_R_Sannagoudar]

Just to get grow & shrink effect, all you have to do is create 2 frames with circles in it with different sizes and prototype it.
But, if you just like the gif you attached, then it gets hectic. You need to create a lot of screens to get an animation. Better you can use After Effects for animation with Lottie Files plugin

[Rohan_Pinto]

Well you are right about Lottie Files. This works pretty well.
Thanks a lot