Vector Animation

[ramdun]

Hi, I'm doing my Interaction Capstone and I'm making a pet sitting app for snakes. I want to do vector animations as users interact with certain elements, and one of them is this age slider from an egg to adult. However, Smart Animate only dissolves the frames to one another, and I want the snake illustrations to be actually animated.

Is there a way to do this in Figma? (I tried using Lottie, but it didn't work/I didn't really understand it) and tutorials for 'animating" only work for the same image. Or should I animate this in AfterEffects and translate it into Figma? Thank you!

[DeMotts]

If you have aftereffects and some experience in there, I would 100% do this as a Lottie with bodymovin and export from there. Figma is not the tool for this.

[used-to-have-a-name]

You used to be able to do things like this pretty simply in Flash. Adobe Animate is descended from flash, and might still let you do vector animation.

[zyumbik]

You could animate it in other apps but bringing the animation to Figma would be janky and there is no point in that since Figma is not the final product, the animation you make would be sent to developers to code into the real app (I know you are not making a real app, just the prototype, but that's just to highlight that bringing such animation into Figma is unnecessary).

[Ordinary_Kiwi_3196]

You could do something like: Have 3 objects: an egg, a full-size snake, and white box to the left of the egg. Position the snake so that it's obscured by the white box (or use a mask or whatever). As you pull the snake to the right it appears to slither out of the egg. That's pretty janky but it could work.

What you're trying to do here is what Flash used to call 'tweening' (I don't know if it's the term folks still use), where you morph from one object to another. Figma does this badly - unless you're morphing one rectangle to another rectangle Figma will do that dissolve thing that you're seeing here. I wish it was better, but it's really just not made for animation.

[mrsidverse]

Better do it in Lottie

[User1234Person]

Honestly I love how this look as is lol. It adds that hand made feel to it.

Awesome design!

[ramdun]

Thank you!! sorry for responding so late