Skip to main content

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


Untitled design (2)

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.


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



  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


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?

figma doubt


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


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

Thanks a lot


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.