Skip to main content
Mr.Biscuit
New Participant
March 1, 2021

Support vector animations in "smart animate"

  • March 1, 2021
  • 62 replies
  • 11242 views

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.

62 replies

Darren_Kurre
March 8, 2022

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???

Jeremie_Bombache_R
March 9, 2022

Joining the voices here, some path smart animation in prototyping is one of the last steps to make Figma best UI/UX design software

dennsi
Active Member
April 26, 2022

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.

zc1
May 20, 2022

totally agree, supporting path morphing would be a great update to figma

Einar
June 3, 2022

Want to add +1 to this one.

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

Please consider prioritizing this!

Tim10
June 16, 2022

Adding to this, really need it!

Sahila_El_Carrouchi1
June 30, 2022

Also waiting for the support of path morphing - guess that’s where I turn my back on other tools completly - thank you for supporting us on this!

Kami
August 6, 2022

Morphing (eg square to rectangle) still missing 😦

JB-C
New Participant
December 2, 2022

oh yes please, yes !

Scott_Ehly
December 4, 2022

Not in “any way”? Really?
Well, Gleb, it’s related to interactive components insomuch as one might use the animation effects between variations in an interactive component. Much the same way one might put the hover state of a button into an interactive component.

Trying to do this is exactly why I found this thread. We’re making a circular processing animation that animates on delay (1ms, because Figma will also not allow “immediate”).
The initial design would show a circle arc growing from 5% ratio to 100% in 25% increments. At completion, it would shrink from the back end back to 5% and then repeat.

Example Here

Once the animation frames were created, we grouped them together as component variations and then assigned the On Delay event to each one in succession so that simply instantiating the component in Prototype would engage the animation.

That’s how this relates to interactive components.

Unfortunately, because ratio, start point, and sweep are not included in the properties that can “smart animate”, the effect is impossible to achieve.