UX/UI & Motion Design

Analyze • Systematize • Prototype

Learning Objectives

After this lesson you can:

  • Analyze motion from a UX perspective
  • Recognize good and bad motion
  • Apply motion hierarchy
  • Set up a motion system
  • Use Figma Motion purposefully
  • Justify motion decisions

Refresher

Previous lesson:

✅  Timing

✅  Easing

✅  Anticipation

✅  Continuity

✅  Spatial Relationships

✅  Shared Element Transitions

Today:

➡️  Evaluate

➡️  Systematize

➡️  Apply

Not:

"When does it look nicer?"

But:

"Which UX friction is being solved?"

Motion Analysis

— Motion design & UX/UI Patterns

Motion Analysis

As a designer, you must be able to evaluate motion.

Not:

  • pretty
  • cool
  • fancy

But:

  • functional
  • understandable
  • supportive

We need a framework to analyze and evaluate motion.

Motion Review Framework

Always ask these questions:

  1. What is changing?
  2. Why is it moving?
  3. Does this help the user?
    • Is the timing correct?
    • Is the easing correct?

1. What is changing?

  • Object?
  • Status?
  • Screen?
  • Context?

Motion should make change visible.

2. Why is it moving?

Possible reasons:

  • Feedback
  • Orientation
  • Focus
  • Hierarchy
  • Navigation

If there is no reason:

➡️ remove the animation.

3. Does this help the user?

Most important question.

Without animation:

  • Does the user understand less?

Yes → useful motion

No → decoration

4a. Is the timing correct?

Timing influences:

  • Speed
  • Trust
  • Professionalism

Too fast = invisible

Too slow = frustrating

4b. Is the easing correct?

Easing should correspond to the physical world:

  • Ease in? Ease out?
  • Feeling
    • Playful
    • Premium
    • ...

Analysis Exercise

Work in pairs.

Analyze:

  • Instagram Like
  • Apple Face ID
  • Google Maps Bottom Sheet
  • ...

Discuss:

  • Why is this moving?
  • What does it solve?

Motion Hierarchy

— Motion design & UX/UI Patterns

Motion Hierarchy

Not all movement is equally important.

Just like typography:

H1 → H2 → Body

Motion also has levels.

Primary Motion

Most important movements.

Examples:

  • Navigation
  • Onboarding
  • Checkout
  • Screen transitions

Must be clearly visible.

Secondary Motion

Supportive.

Examples:

  • Cards
  • Filters
  • Tabs
  • Panels

Less emphasis.

Tertiary Motion

Micro-feedback.

Examples:

  • Hover states
  • Like buttons
  • Toggles

Short, subtle movements.

Why Hierarchy?

When everything moves:

➡️ Nothing is important.

Motion demands attention.

Use that attention consciously.

Exercise

Identify the motion below and assign it to a category:

🟥 Primary Motion

🟨 Secondary Motion

🟩 Tertiary Motion

Discuss differences.

Motion Systems

— Motion design & UX/UI Patterns

Motion Systems

Professional teams do not design individual animations.

They design systems.

What is a Motion System?

A collection of fixed agreements.

The motion equivalent of:

  • Color Systems
  • Typography Systems
  • Design Systems

Individual Animations

Problem:

  • Inconsistent
  • Difficult to maintain
  • Difficult to scale

Every designer invents something different.

Motion System

Advantages:

✅ Consistent

✅ Reusable

✅ Efficient

✅ Scalable

Example

Enter

Slide Up

Exit

Fade Out

Modal

Scale + Fade

Notification

Slide In Right

Motion Tokens

Like design tokens. Not fully supported in Figma yet, but you can use them purely as documentation.

Motion Tokens

Duration
---------
Fast     = 150ms
Medium   = 300ms
Slow     = 450ms

Easing
---------
Standard = Ease Out
Emphasis = Ease In Out
Exit     = Ease In

Distance
---------
Small    = 8px
Medium   = 24px
Large    = 64px
``

Why Tokens?

Not:

"Pick something that feels right."

But:

"Use duration-medium."

Consistency always wins!

Exercise

Design a motion system for:

📱 Tinder-like App

Define:

  • 3 durations
  • 3 easings
  • 3 transitions

Motion UI Patterns

— Motion design & UX/UI Patterns

Advanced UI Patterns

Commonly used motion patterns.

Not just trendy, but proven to work.

1. Bottom Sheets

Popular in:

  • Google Maps
  • Uber
  • Bolt

Advantage:

Context remains visible.

Why do Bottom Sheets work?

The user does not lose the current page.

Motion clarifies:

  • Where the information comes from
  • How it can disappear again

2. Expand / Collapse

Widely used.

Often designed incorrectly!

Bad Expand

Panel appears instantly.

Result:

  • Disruption
  • Less context

Good Expand

Content grows along with it.

User follows the evolution.

Continuity is maintained.

3. Floating Action Button

FAB uses motion to:

  • Draw focus
  • Show extra actions
  • Maintain context

4. Progressive Disclosure

Don't show everything at once.

Motion helps to reveal information gradually.

  • Steps
  • Popups on focus
  • ...

Why?

User processes information step by step.

Less cognitive load.

Exercise

Build an Onboarding with Figma and Motion based on the following design:

  • Step 1:

Motion Checklist

— Motion design & UX/UI Patterns

Motion Heuristics

A checklist for every designer.

Question 1

Why is this moving?

Question 2

Does it help the user?

Question 3

Does it clarify a relationship?

Question 4

Does it provide feedback?

Question 5

Does it direct attention?

Question 6

Is it fast enough?

Question 7

Is it consistent?

Question 8

Does it respect accessibility?

Question 9

Does the UX get worse without this animation?

Question 10

Can this become a reusable pattern?

Challenge

— Motion design & UX/UI Patterns

Redesign Challenge

You are given an interface without motion.

Goal:

Add a maximum of 3 animations.

No more.

Rule 1

Every animation must have a purpose.

Ask yourself:

What problem am I solving?

Rule 2

Do not use multiple animations for the same problem.

Simplicity wins.

Rule 3

Consistency over spectacle.

Professional motion is usually subtle.

Discussion

Defend every animation.

Not:

"It looks nice."

But:

"This clarifies the relationship between screens."

Class Assignment

Design motion for one flow:

  • Food Delivery
  • Banking
  • Travel Booking
  • E-commerce
  • ...

Mandatory Use

✅ Timing

✅ Easing

✅ Anticipation

✅ Continuity

✅ Shared Element Transition

Pitch

2 minutes per team.

Show:

  • Prototype
  • Motion choices
  • UX motivation

Do not show:

"cool effects"

Do show:

"solved user problems"

Recap

Good motion:

✅ Informs

✅ Orients

✅ Guides

✅ Strengthens UX