Setting things up
Organize your layers
Smart Animate cares about a few things when it’s figuring out how to magically animate transitions:
- Layer names
- Layer hierarchy
- Layer opacity
This is so important it’s worth typing again! In bold! Layer names, hierarchy, and opacity. These need to be consistent between each pair of frames that you want to animate. 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.
So, before doing anything, name those frames in a way that makes sense to you. 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.
When building the prototype, I create a new state in the animation by first duplicating everything in the prior state. Start with a frame, duplicate, create transition, duplicate again, create another transition, ad infinitum.
Wrangle those frames
Figma prototypes can get out of control and trigger my anxiety with dozens of light-blue nodes and noodles snaking everywhere. I’ve found that it helps me both stay calm and keep track of my work if I lay out my prototype’s frames according to two simple rules: