Figma Friday - Smart Animate Edition by James Lyons on October 07, 2019

Last Thursday was an exciting day - Figma announced their Smart Animate feature, seemingly out of nowhere. Which was great timing for us, as the following day was our monthly #FigmaFriday.

The more we played around, the more we realized this could cover many of our prototyping needs without having to switch over to another tool like Principle.

While Principle is still great for more complex interactions, having the ability to add more granular motion directly in our Figma prototypes allows us to better communicate animations and transitions in much less time.

If you set up your layers well, it's literally one click to add some animation between two frames.

Note — it was more than one click to animate that button, check out the full file to see.

This opens up many opportunities for prototyping, and the Liferay Design team is anticipating what future updates to this feature might bring.

Some things that came up during Figma Friday that we would love to see in Smart Animate:

• Component transitions for consistency across prototypes.
• The ability to animate between scroll positions, like anchor links on the web
• Keyframes for individual layers. Right now we can achieve a similar effect through delays, but the ability to orchestrate staggered animations doesn't seem possible yet.

Conclusion

Smart Animate was totally unexpected — it feels like Figma just started supporting GIFs in prototypes.

Some of our designers were previously going into multiple other programs (Figma → After Effects → Photoshop → Figma) to create GIFs to illustrate motion within a prototype. This was a little cumbersome and caused load time issues, so it's a very welcome addition to Figma's toolkit.

We're looking forward to sharing more we that create with Smart Animate!