-Figma Microinteractions

I teach UI Interaction design and work with Figma, in my classes we analyze in-depth the tool's mechanics to achieve complex interfaces.
This is the first article of a documentation series

Project 1 : the car

Why

  1. Work with Figma interactive components with variants
  2. Understand the bounding box, position, rotation axis, linear timing
  3. See what is possible with only one (final) Frame
  4. Recognize & Understand UI animation Patterns
  5. Charakter, Laws of Motion, Delight, Consistence, Flow

How

Illustrativ

We start with easy, Illustrative ideas, what we want is to explore and understand the Tool before we move to the UI standard interactions like checkboxes, switches, buttons, controls, overlays, etc.

Teamwork: each student has a Task to solve

Besides, as we know Figma is a heavyweight illustration tool

What

Project 1: The car

Its the 1966 Porsche 356 Dutch Police Car

here is a picture of it

ui microinteraction example
1966 Porsche 356 Dutch Police Car first draft

Step 1: Bulding the Components

The Wheel

  1. Shape tools, Boolean operations, Frames, Groups, Component, Variants, Rotation, Swap instances, Change variant, Prototype: After delay, Smart animate, loop
ui microinteraction example
356er Wheel Component

Adjust rotation

  1. Figma represents a layer’s position on the canvas using X and Y coordinates that begin from top-left corner of the layer's bounds. Figma Position & Rotation
ui microinteraction example
position

The Pipe

  1. Shape tools, Component, Variants, Change variant, Prototype: After delay, Smart animate, Interaction timing
ui microinteraction example
356er Pipe

The Light

  1. Shape tools, Component, Variants, Change variant, Prototype: After delay, Smart animate, Interaction timing
ui microinteraction example
356er Siren Light

Step 2: Assemblage

First Test

ui microinteraction example

Add background Elements

ui microinteraction example

Step 3: Performance

Test Performance..

Step 4: Mix Components, be creative

Questions:

why does - a new component - a group made of components not animate (?)