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?
4. • 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.

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