Currently, in Figma, smart animate only works on opacity, color fill, stroke, position, width&height. The options at your disposal when making an interactive prototype are pretty limited.
It would come in handy if Figma can expand the supported animatable properties to include: Radius, Effects (shadow spread), VectorNetwork, Polygon Ratio, Ellipse Sweep, Dash, etc.
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.
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.
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?
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.
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
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.
Totally agree. Seems like a no-brainer that would have been part of this feature given they already do it within the Figma interface! @Figma_Support what is the update on this???
I really enjoy doing quick ideation for interaction animations like hover states etc using Smart Animate. Figma still is limited though and I’d also like to use what @Mr.Biscuit pointed out in that thread.
It is so close to being a situation where I’d do all my presentations etc in Figma, enabling free form morphing between shapes & paths would really unlock a lot of creative possibilities