-Figma Microinteractions

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 the first article of a documentation series

Project 1 : the car

the Purpose

  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
  6. Teamwork, each student has a Task to solve

Illustrativ

We start with elementary 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, besides as we know Figma is a serious illustration tool

Project 1: The car

Its the 1966 Porsche 356 Dutch Police Car

ui microinteraction example
1966 Porsche 356 Dutch Police Car first draft

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

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

Test

ui microinteraction example

Add background Elements

ui microinteraction example

Test Performance..

Questions:

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