-Figma Microinteractions

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

the Purpose

  1. Understand the Figma preset of animations
  2. Understand & work with Easing functions
  3. Understand smart animate matching layers
  4. Simple Prototyping rules in Figma

1: Move in - Move out

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)

Figma Prototyping Animation: Move in & move out

With Smart animate matching layers

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

Move in & move out with Smart animate matching layers

Smart animate matching layers, another example

Move in & move out with Smart animate matching layers

2: Push

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

Push example

Push: the new Frame moves in from the left side and pushes to the the existing frame to the right

Push without smart animate matching layers

Push example, with smart animate matching layers

much more useful:

Push with smart animate matching layers

This is the design pattern of Sliding Tabs. This provide us aditional orientation

3: Slide in and slide out

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

Slide in & slide out

Slide in and slide out with smart animate matching layers

The matching layers behave now different:

Slide in & slide out

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