Once we have selected a trigger, we get different options for the interaction behavior, which kind of animation should we apply? Figma give us five basic options: Move in, Move out, Push, Slide in and Slide Out
We can select one and see how it looks in a small preview window with A and B screens in the animation menu
Besides we get the Option Smart animate matching layers, how does this works together?
Project 3: Prototyping Animations
Move in: the new Frame moves in from top and covers the existing frame (of course we can change the incoming direction to the left, right or bottom)
With smart animate matching layers we get another behaviour, we dont see the new frame coming down from above and covering the existing frame, if the frames have different colors we get a transition, all matching layers seem to stay at their original place
Push: the new Frame moves in from top and pushes down the existing frame (here we can change also the incoming direction to the left, right or bottom)
We only have push, not push in and push out, we can change the directions wit the arrows in the animation menu
Push: the new Frame moves in from the left side and pushes to the the existing frame to the right
much more useful:
This is the design pattern of Sliding Tabs. This provide us aditional orientation
Slide in and slide out: the new Frame moves in from top. The existing frame slides out (here we can change also the incoming direction to the left, right or bottom)
We only have push, not push in and push out, we can change the directions wit the arrows in the animation menu
The matching layers behave now different:
I teach UI Interaction design and work with Figma, in my classes we analyze in-depth the mechanics of the tool in order to achieve more complex ui interfaces.
This is a documentation of the learn process