Smart Animate needs some TLC from the Figma team.
I am lucky enough to work in an industry that is not averse to using more interesting animation in our UI, however I can’t create proper examples of interactions because of how Smart Animate works.
Animation is directly tied to prototyping flows and that creates issues as animations are not ‘pages’ and exist outside of a page-to-page framework.
Smart animating between 2 frames inherently means that all animations start and end at the same time, of course that is exactly how it supposed to work but this makes certain types of animations completely inaccessible - such as cascading items (multiple objects loading in on slight delays). Nested Animations can’t trigger on page load don’t work and they take forever to make so there is no real work around for this. There have been a few posts on the subject, but I believe it all stems from the same issue of animating between states (frames) and the problems that causes (I only mention this to help categorize these topics).
Here are a few solutions some have mentioned and some of my own:
- Introduce UI for managing: The starting and ending times of designated objects between 2 states/frames
- This could be like a keyframe tool, but it could also just be a list of objects with ‘start delay’ and ‘ending time’
- Figma knows the start and end location of every designated object, it just needs to know when they start and end
- This could also allow for individual curves on designated objects
- “On Arrival” animation events
- We have Hover events for pages, we should have other types of animation that are independent of parent frames
- These would trigger nested component animations once the user has landed on the frame instead of during the transition between frames.
- This allows for flexibility in animation as they are separated from the flow of the app and transitions between pages
- You would have a component that has 2 states and animates between them once someone has arrived on a page
- Or introduce a Seamless Transition between frames
- The current transition ‘After Delay’ has a minimum of 1ms, this would be a 0ms version
- This would allow for manual ‘key framing’ for building animation flows between each animation state, it’s much more tedious for the user but allows for smooth animation transitions
Or you can separate animation from the pages entirely, though that’s probably a lot more work than these solutions ^.
Either way, Smart Animate, in its current shape is not versatile enough and with an addition like ‘Seamless Transition’ or ‘On Arrival events’ you would open up a whole new creative area for prototyping within Figma.