Figma animation how to#

I’ve found it helps when I go over-the-top with names like 'ANIMATE ME' or 'THIS THING MOVES', but you should use whatever will be sensible to you once there are 14 versions of the same frame on your canvas. So, before doing anything, name those frames in a way that makes sense to you. If a transition doesn’t seem to be working, it’s almost certainly because a layer name is not what Figma expects it to be, or a group has slipped out and nested itself into a different frame. These need to be consistent between each pair of frames that you want to animate. This is so important it’s worth typing again! In bold! Layer names, hierarchy, and opacity.

Figma animation how to#

Smart Animate cares about a few things when it’s figuring out how to magically animate transitions: Here are a few tips that I’ve developed while experimenting with Figma as an animation tool.

And while Smart Animate has its limitations when it comes to expressiveness and overlapping animations, I can get 80% of the value and a pretty decent-looking end product for 20% of the effort I might put into using a different tool. Since I’m already designing in Figma, there’s no time wasted re-creating or exporting-and-importing elements to another tool. I’ve used Figma to create animations for roadmap docs and product strategy decks and customer surveys, and we’ve even used Figma to create shipped animations for in-product onboarding. But I’ve been pleasantly surprised building out these types of animations just using Figma’s prototyping capabilities and its Smart Animate feature. I often instinctively reach for Framer for this type of work-others might think to open After Effects or Principle or even Keynote. They pop up in our products to introduce new concepts and features.We use them as “vignettes” to demonstrate a design vision or product direction.

We use them in research to convey and assess the viability of value props.

They’re all over our websites and landing pages.

We make and use these sorts of abstract UI animations for a number of purposes at Dropbox: