Motion Design Fundamentals

What is on the program?

  1. Why motion?
  2. Timing
  3. Easing
  4. Disney Principles for UI
  5. Continuity & Spatial Design
  6. Trends & Best Practices
  7. Mini exercises in Figma / Figma Motion

An interface?

— Motion Design

An interface?

What does an interface consist of?

  • Typography
  • Color
  • Layout
  • Images
  • Motion
  • Typography
  • Color
  • Layout
  • Images
  • Motion

Why use motion?

— Motion Design

  • Loss of context
  • Confusion
  • Cognitive load
  • Lack of feedback

Motion ≠ Decoration

Motion is communication.

Motion helps users:

  • Understand
  • Orient
  • Focus
  • Build trust

Examples?

Motion is communication.

  • Understand

    What happened?

  • Orient

    Where does it come from? Where is it going?

  • Focus

    What is important?

When to use motion?

— Motion Design

When does Motion add value?

  1. ✅  Feedback

  2. ✅  Continuity

  3. ✅  Focus

  4. ✅  Orientation

  5. ✅  Hierarchy

Bad Motion?

  • Random
  • Too slow
  • Too much movement
  • Purely decorative

Does this help the user?

1. UX Improvement: Feedback

User performs an action.

Interface responds.

Examples:

  • Like
  • Toggle
  • Form submit
  • Refresh

2. UX Improvement: Continuity

User builds a mental map.

Motion helps show relationships between screens.

3. UX Improvement: Focus

Motion directs attention.

  • Error
  • Alert
  • Snackbar
  • CTA

Timing

— Motion Design

One of the most important motion concepts.

Timing determines:

  • Weight
  • Speed
  • Personality

What is Good Timing?

Too fast:

❌ Not visible + Stress?

Too slow:

❌ Frustrating

Goal:

✅ Natural

Think about the physical world.

Timing Guidelines

Micro-interactions

100–200ms

Example: buttons, checkbox, hover

UI Transitions

200–400ms

Example: Opening panels, dropdowns, cards

Navigation

300–600ms

Example: page transitions, modals (dialog panels)

Weight & Timing

Small object (weighs less)

→ faster

Large panel (weighs more)

→ slower

Class demo Figma Motion

Opening menu:

  • 100ms
  • 300ms
  • 800ms

Observe:

  • Readability
  • Reactivity
  • Quality

Easing

— Motion Design

Easing

Not just:

How long?

But also:

How does it move?

Why Easing?

In the real world:

Objects do not start and stop abruptly.

Neither do interfaces.

Linear

Constant speed

Use for:

  • Progress bars
  • Loaders
  • Color

Rarely for UI transitions

Ease Out

Start fast,

Stop slow

✅ Most used in UI

Ease In

Start slow,

End fast

When to use:

  • Exiting objects

Ease In Out

Gentle start

Fast middle phase

Gentle stop

Perfect for larger movements

Why Ease Out Is Popular

Feels:

  • Responsive
  • Natural
  • Premium

User gets immediate feedback

Mini Exercise

Apply different easings to the same menu animation:

  • Linear
  • Ease Out
  • Ease In-Out

Which one feels best?

Why?

Motion & Disney?

— Motion Design

Disney Principles

Twelve basic principles of animation

Not all 12 are relevant.

Important for interfaces:

  • Anticipation
  • Staging
  • Follow Through
  • Secondary Action
  • Timing
  • Slow In / Slow Out

Anticipation

Small preparation before action.

Example:

Button:

98% → 102% → 100%

Why Anticipation Works

Human brains:

➡️ predict movement

Result:

  • More clarity
  • More feedback

Staging

Create focus: Where should the user look?

Its purpose is to direct the audience's attention, and make it clear what is of greatest importance in a scene;

Techniques:

  • Blur
  • Fade
  • Scale
  • Contrast

Follow Through

Not everything stops at the same time.

Example:

  • Panel stops
  • Shadow disappears later

Feels organic

Secondary Action

Main action

Is emphasized thanks to secondary action.

Subtle supporting movement

Example:

Card + icon

Exercise

Animate a CTA Button in Figma Motion and make two versions, using the following concepts:

Version A: Simple

  • Scale

Version B

  • Anticipation
  • Secondary Action

Compare the feeling

Spatial Relationships

— Motion Design

Spatial Relationships

Important UX Motion Concept:

Motion shows relationships.

Everything Comes From Somewhere

Elements:

❌  do not just appear

❌  do not just disappear

✅  have an origin

✅  have a destination

Shared Element Transition

Think of "Continuity", this aligns with that.

Card

↓

Detail page

User understands:

This is the same object.

Exercise in Figma

Product Card

↓

Product Detail

Create a Shared Element Transition.

Recap

— Motion Design

What Works Today?

Popular patterns:

  • Microinteractions
  • Shared Elements
  • Skeleton Loading
  • Scroll Motion

But what about accessibility?

Not everyone experiences motion the same way.

Consider:

  • Motion sensitivity
  • Vestibular disorders

Use motion consciously.

When No Motion?

No clear purpose?

➡️ Remove it.

Good motion:

  • Informs
  • Orients
  • Guides