Support vector animations in "smart animate"

well it’s been a while since Adobe XD released auto animate for strokes, paths, and rotation. I’m a big fan of Figma and I adore its smoothness and super-efficient collaboration features over other UI software. As a senior UI designer, I have had so many UI design cases in which I needed to auto animate paths and strokes in order to deliver a smooth experience to my audience but unfortunately, Figma does not offer such a feature, Please, please, please consider adding this super useful feature in the latest interactive components beta version. Hope you guys at @figma have already started developing smart animate for strokes, paths, and rotation.

Fingers crossed. 🙂

I don’t think your suggestion is related to interactive components in any way, it’s about smart animate limitations. So I’m moving it to #product-ideas.

By the way, strokes and rotations already work fine in Smart Animate. Only path morphing animations aren’t possible. Example of rotations: Figma - Branding for Bookclub | I LOVE the Smart Animate feature. It's been so helpful to make clean and clear client presentatio...

That explains why I get funky shadow stuff happening with Smart Animate. They seem to lag behind the animation of the parent object.

Right now when creating an SVG shape, if trying to animate a vector point by changing its position, it will simply replace the shapes using a fade effect (as if they were 2 different images).

It would be amazing for the prototype to recognize the changes to the path and apply the animation, image a triangle transforming into a circle using smart animate. ❤️

Would be great if you could smart animate the sweep and ratio % on ellipses as a much simpler way to create spinners and pie graph animations, instead of the hacky mask method in the playground file. You can already animate all of the other properties so not sure why these would be an exception.

I like using interactive components and making cool animations inside components. So right now in Figma, as far as I know, if you want to convert a shape into another shape with smart animate, the result you get is one shape disappearing and the other reappearing at the same time (a weird dissolve effect). What I would like to see is the ability to tween shapes/graphics so its more of a morphing effect.

For example: I have a square, and I want it to be a circle. Currently what happens is the square begins to fade and the circle begins to appear at the same time, making the weird dissolve effect. This also makes both appear transparent for a brief moment, which is not desirable. What I’d like to happen is for the square to begin rounding and morph into a circle, keeping the transparency the same.

You could list it as another option like Smart Animate, and it could be Morph, or Tween, etc. Alternatively, it could be a tick box in the interaction menu when users select Smart Animate. I also think that extending this ability to graphics, and drawing tools as well will give users a whole new doorway to make some really cool interactions in Figma prototyping.

Love to hear anyone else’s thoughts on a tweening feature for Figma animations. Do you see this being useful?

Is there any plan by the Figma team to allow animating arcs with Smart Animate? With Interactive Components I see a huge potential for animating pending states (progress indicators etc). I already use it for spinners, content skeletons and other micro-interaction stuff but I think animating arcs with Smart Animate is the missing bit that people would love 🙂

Nothing here?

As someone with decent background prototyping some pretty cool stuff in Xd, I was really shocked and disappointed today to find out that Figma doesn’t animate morphed paths at all. I thought it was a mistake at first and I had set up the prototype wrongly, only to do research and realize that Figma actually does not animate lines like Xd. Please guys, do consider adding this feature.

Thanks!

People can use @figmadesign to make video animations using screen capture, But you need to give some more features in animations

Or Give a Video export feature from prototype flow
Which can be a frame by frame animation by animation but with SMOOTH TWEENING feature
#figma