Trying Figmotion



I want to use this element project to learn how to animate. I have decided to research and watch some videos on how to do this. I am interested in making the images that I use for my elements projects app/ website move or animate in some way so I am excited to learn how to do this. I decided to try out ‘Figmotion’ which is a plugin for Figma that allows people to add motions to their designs and I have added my progress below.



This was a very simple mehod, all I had to do was to select the ‘frame’ and then open the figmotion plugin. I then selected the motion that I wanted my shape to take – I chose rotation and I also chose how long that I wanted the animation to go on for, I then hit the render button and I have included screenshots of how this went below.






After rendering… 

I was able to watch the animation after rending however I was only able to export the css code, so I just recording the screen and I added that video below.





How did this go and what’s next ?



Making the square move was relatively easy using figmotion, it was a successful exploration however I found it very difficult exporting this file. I think that this method is too difficult to continue to use for my elements project. This is useful if I needed to export the code of my animation (which is something I should note for my future coding projects), the video above is a screen recording instead of an exportation of the actual gif/aniamtion I made. So I need to figure out an easier way of exporting (if there is one). I have seen some other ‘plugins’ that you can use for animation feature I am going to explore the ‘Motion’ plug in as I think that this might be will be an easier method for the exporting aspect. I will update my progress on this very soon… The purpose of this research into motion is because I want to add this into my element project so I think that this research was beneficial and I will contain to explore the best techniques for me to do this. I need to do some image research too.



IXD301- Learning to animate on Figma – Figmotion
Tagged on:

Leave a Reply

Your email address will not be published.