This semi-rabbit hole exploration started this laid-back Saturday morning when I saw that Shotcut has an update that supports JSON animations. That’s when I found out about LottieFiles where you can get free animations that are downloadable as JSON files. It’s interesting to know that I can now add vector animations in Shotcut, however, the latest version of Shotcut (22.06) has a bug that fails to export to my favorite setting which is “YouTube” in MP4 format.

This led me to wonder how I can integrate Lottie animations in Figma through a plugin and there were two things that I discovered for myself:

1. I can add the vector frame of the Lottie animation in Figma, and
2. I can enhance my Figma prototypes using GIF animations from LottieFiles

Next week, I have an upcoming presentation to the design team about an introduction to DesignOps. One type of visual approach that I am planning is a static timeline chart that shows how capacity planning works. Then I remembered how Prezi animates their presentations — that’s how I wanted it to be. So I created Figma components that resizes in each frame depending on the zoom focus. Then each frame is connected in sequence through the prototype instant animate.

In Figma, it works in reverse compared to Prezi in the sense that:

• In Figma, the frame is fixed, and you define the subject’s zoom and angle
• In Prezi, the subject is fixed, and you define the frame’s zoom and angle

Here’s the Figma prototype I experimented with: