-Figma Microinteractions

We build now standard Element: the switch checkbox. A switch allows the user to quickly toggle between two possible states: on and off

Project 2 : the switch checkbox

CSS Switch with an easeInOutBack function

the Purpose

  1. Work with Figma interactive components with variants
  2. Understand the bounding box, position, linear timing
  3. Understand & work with Easing functions
  4. Charakter, Laws of Motion, Delight, Consistence, Flow

Easing functions

"Übergangsfunktionen(engl. easing functions) bestimmen die Änderungsrate eines Parameters im Verlauf der Zeit.

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor." quelle: easings.net

here also an explanation: what-is-an-easing-function and at css tricks: ease-y-breezy-a-primer-on-easing-functions

Switch figma variant
Switch figma variant

Start: Standard

We want later to magnify the animation details, some extra graphical elements will be added and the timing will be slowed, but at the first step we want to build a 'standard' switch

Switch with an easeInOutBack function

Switch figma variant
easeInOutBack 80ms

Simulate Material: Squash & Stretch

We can change the form of the inner circle, we use compressing and stretching the shape as a way to add flexibility and elasticity to the animation. (Squash und Stretch)

Switch Squash & Stretch variant
Switch Squash & Stretch variant

Test

Slow switch linear animated / Squash & Stretch variant

Slight bounce | Motion lines

Add a slight bounce, we can supose the switch is a solid object, so we try to add even more realism with more bounce, we can just exagerate first so we can see what happens first

Slow switch linear animated / Squash & Stretch variant / Bounce

Motion lines

In comics, motion lines (also known as movement lines, action lines, speed lines,[1] or zip ribbons) are the abstract lines that appear behind a moving object or person, parallel to its direction of movement, to make it appear as if it is moving quickly. text source

Motion Lines
Circle with simple motion lines to indicate that it is bouncing

Test with slow animation:

Switch with motion lines | Very Slow animated

Increase the speed , add colors

Switch test V1

Add a text layer

Switch test V2

V3 variation: switch with icons

Switch test V3

Questions:

Is it possible to do this with Smart Animate and Drag Triggers??

variation: Drag Trigger

We Test On Drag between Variants:

Switch figma variant
On Drag between Variants

variation: Drag Trigger

We Test On Drag between Variants:

Switch test, this doesnt feel properly, its more a click than a drag event

variation: Drag Trigger between two frames

We Test On Drag between Two Frames

Switch figma variant
On Drag between Two Frames

Result:

We Test On Drag between Variants:

Switch test, this works better!

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