Skip to content
Kadr, home
RU: Русская версия

20 wk Flagship course

We go from timing and curves to Figma prototypes, interactive animation in Rive and developer handoff. Every week brings an exercise and a mentor review.

Next start
13 October 2026
Length
20 weeks
Live session
Tuesdays, 19:00 Moscow time, 90 minutes
Workload
8–10 hours a week
Group
up to 18 people
ApplyPlans

02 Weeks

20 weeks in a row

Each frame is one week: three lesson topics, a practice task and what you hand in to your mentor on Sunday.

  1. Week 1Module 1 · Timing and spacing

    Keyframes and timing

    • Compositions, layers and keyframes in After Effects
    • Timing versus spacing: what each controls
    • Which animation principles apply to interfaces

    PracticeMove a square across the frame in 12, 24 and 36 frames, then compare.

    → Three MP4s at 60 fps

  2. Week 2Module 1 · Timing and spacing

    The bouncing ball

    • Squash and stretch that keeps the volume
    • Anticipation and follow-through
    • Arcs and decaying bounce heights

    PracticeAnimate a bouncing ball with squash and stretch and decaying bounces.

    → MP4, 4 seconds, 60 fps

  3. Week 3Module 2 · Curves and easing

    Curves in the Graph Editor

    • Value graph versus speed graph
    • Keyframe handles and influence in Keyframe Velocity
    • Linear, ease-in, ease-out and ease-in-out

    PracticeRepeat one move with four easing types and compare their speed graphs.

    → MP4 with four versions side by side

  4. Week 4Module 2 · Curves and easing

    Entrances and exits

    • Why entrances ease out and exits ease in
    • How duration depends on distance and size
    • Turning an After Effects curve into cubic-bezier

    PracticeAnimate a card entrance with three curves, then pick one and justify it.

    → MP4 and a 3–5 sentence rationale

  5. Week 5Module 3 · Micro-interactions

    Component states

    • States of buttons, toggles and inputs
    • Variants and interactive components in Figma
    • How Smart Animate matches layers by name

    PracticeBuild a toggle that animates between its states with Smart Animate.

    → Link to a Figma prototype

  6. Week 6Module 3 · Micro-interactions

    Responding to input

    • Triggers: on click, while hovering, after delay
    • Easing and spring curves in Figma prototypes
    • Variables and conditionals for prototype state

    PracticeBuild an input field with focus, error and success states.

    → Figma prototype with three states

  7. Week 7Module 3 · Micro-interactions

    The loading state

    • Loading choreography: press, wait, result
    • Spinner, progress bar or skeleton: which to use
    • Showing a long wait without irritating people

    PracticeBuild a loading state from the button press to the result.

    → Figma prototype and a screen recording

  8. Week 8Module 4 · Screen transitions

    Navigation transitions

    • The spatial model: forward, back, on top
    • Direction of motion shows screen hierarchy
    • Navigate to, Open overlay and transition types in Figma

    PracticeBuild a two-screen prototype with a push and a modal transition.

    → Link to a Figma prototype

  9. Week 9Module 4 · Screen transitions

    Screen choreography

    • What moves first: order and delays
    • Staggering the items of a list
    • A screen in After Effects: precomps and motion blur

    PracticeAnimate a list appearing in After Effects, with items entering in turn.

    → MP4, 2 seconds, 60 fps

  10. Week 10Module 4 · Screen transitions

    The shared element

    • One object across two screens
    • Scale, position and masking instead of a fade
    • Smart Animate or After Effects: where each fits

    PracticeBuild a transition from a list to a product card with a shared element.

    → Figma prototype and an MP4

  11. Week 11Module 5 · Brand motion

    Brand character in motion

    • Turning brand traits into speed and curves
    • One-page motion principles for a brand system
    • Shape layers, Trim Paths and masks for logos

    PracticeAnimate one button in two characters, strict and playful, and describe the difference.

    → Two MP4s and a principles page

  12. Week 12Module 5 · Brand motion

    The logo reveal

    • Building a logo from Trim Paths and masks
    • Overshoot and settle: an inertia expression
    • Exporting with alpha: ProRes 4444 or Lottie

    PracticeMake a 2-second logo reveal in two versions: strict and playful.

    → Two MP4s, 2 seconds each

  13. Week 13Module 6 · Type in motion

    Text animators

    • Animators and the Range Selector: letters, words, lines
    • A variable font's wght axis in After Effects
    • Counting numbers: Slider Control and an expression

    PracticeAnimate a headline and an amount counter for a product screen.

    → MP4, 3 seconds, 60 fps

  14. Week 14Module 6 · Type in motion

    The kinetic word

    • How motion carries the meaning of a word
    • How long a word must hold to be read
    • From literal to metaphorical: reviewing options

    PracticeAnimate a word so that the motion carries its meaning.

    → MP4, 3–5 seconds, 60 fps

  15. Week 15Module 7 · Rive and Lottie

    Lottie via Bodymovin

    • What Bodymovin exports and what it drops
    • File weight: shape layers, bitmaps, expressions
    • Checking a Lottie in browsers and on phones

    PracticeExport an icon animation to Lottie and cut its file weight.

    → JSON file, weight before and after

  16. Week 16Module 7 · Rive and Lottie

    First steps in Rive

    • Artboards, shapes and timelines in Rive
    • Bringing an icon over from Figma as SVG
    • Idle and active animations

    PracticeDraw the “Favourite” icon in Rive and animate its two states.

    → A .riv file with two animations

  17. Week 17Module 7 · Rive and Lottie

    Rive state machines

    • States, transitions and conditions in a state machine
    • Inputs: boolean, trigger and number
    • Listeners for hover and click

    PracticeBuild the “Favourite” icon with a state machine: hover, press, undo.

    → A .riv file and a screen recording

  18. Week 18Module 8 · Developer handoff and final project

    CSS and Web Animations

    • CSS transitions: property, duration, timing function
    • Web Animations API: keyframes and animate()
    • prefers-reduced-motion: a version for motion-sensitive users

    PracticeChoose a scenario for the final project and storyboard 3–5 screens.

    → A storyboard of 3–5 screens

  19. Week 19Module 8 · Developer handoff and final project

    Building the final project

    • From storyboard to prototype: the working order
    • One scale of durations and curves throughout
    • Testing the prototype on a real phone

    PracticeBuild the transitions and micro-interactions for every screen in Figma.

    → Figma prototype, 3–5 screens

  20. Week 20Module 8 · Developer handoff and final project

    Spec and defence

    • A spec as a table or annotated frames
    • Presenting a project: problem, decisions, trade-offs
    • How the project defence at the live session works

    PracticeSpecify the duration, delay and cubic-bezier for every transition.

    → Prototype and animation spec

03 Modules

Modules and exercises

20 weeks, 8 modules and a final project for your portfolio.

  1. Module 1 Weeks 1–2 · After Effects

    Timing and spacing

    Classic animation principles applied to interfaces: timing, spacing, anticipation, squash and stretch.

    ExerciseBouncing ball: squash and stretch, decaying bounce height

    1. 01

      Keyframes and timing

      • Compositions, layers and keyframes in After Effects
      • Timing versus spacing: what each controls
      • Which animation principles apply to interfaces

      Practice Move a square across the frame in 12, 24 and 36 frames, then compare.

      Hand in: Three MP4s at 60 fps

    2. 02

      The bouncing ball

      • Squash and stretch that keeps the volume
      • Anticipation and follow-through
      • Arcs and decaying bounce heights

      Practice Animate a bouncing ball with squash and stretch and decaying bounces.

      Hand in: MP4, 4 seconds, 60 fps

  2. Module 2 Weeks 3–4 · After Effects

    Curves and easing

    The Graph Editor: value and speed graphs. Why ease-out suits an entrance and ease-in suits an exit.

    ExerciseA card enters the screen with three curves: pick one and justify it

    1. 03

      Curves in the Graph Editor

      • Value graph versus speed graph
      • Keyframe handles and influence in Keyframe Velocity
      • Linear, ease-in, ease-out and ease-in-out

      Practice Repeat one move with four easing types and compare their speed graphs.

      Hand in: MP4 with four versions side by side

    2. 04

      Entrances and exits

      • Why entrances ease out and exits ease in
      • How duration depends on distance and size
      • Turning an After Effects curve into cubic-bezier

      Practice Animate a card entrance with three curves, then pick one and justify it.

      Hand in: MP4 and a 3–5 sentence rationale

  3. Module 3 Weeks 5–7 · Figma

    Micro-interactions

    States of buttons, toggles and inputs. Interactive components and Smart Animate in Figma.

    ExerciseA loading state: from the button press to the result

    1. 05

      Component states

      • States of buttons, toggles and inputs
      • Variants and interactive components in Figma
      • How Smart Animate matches layers by name

      Practice Build a toggle that animates between its states with Smart Animate.

      Hand in: Link to a Figma prototype

    2. 06

      Responding to input

      • Triggers: on click, while hovering, after delay
      • Easing and spring curves in Figma prototypes
      • Variables and conditionals for prototype state

      Practice Build an input field with focus, error and success states.

      Hand in: Figma prototype with three states

    3. 07

      The loading state

      • Loading choreography: press, wait, result
      • Spinner, progress bar or skeleton: which to use
      • Showing a long wait without irritating people

      Practice Build a loading state from the button press to the result.

      Hand in: Figma prototype and a screen recording

  4. Module 4 Weeks 8–10 · Figma, After Effects

    Screen transitions

    Navigation transitions, a shared element across two screens, choreography: what moves first and why.

    ExerciseFrom a list to a product card with a shared element

    1. 08

      Navigation transitions

      • The spatial model: forward, back, on top
      • Direction of motion shows screen hierarchy
      • Navigate to, Open overlay and transition types in Figma

      Practice Build a two-screen prototype with a push and a modal transition.

      Hand in: Link to a Figma prototype

    2. 09

      Screen choreography

      • What moves first: order and delays
      • Staggering the items of a list
      • A screen in After Effects: precomps and motion blur

      Practice Animate a list appearing in After Effects, with items entering in turn.

      Hand in: MP4, 2 seconds, 60 fps

    3. 10

      The shared element

      • One object across two screens
      • Scale, position and masking instead of a fade
      • Smart Animate or After Effects: where each fits

      Practice Build a transition from a list to a product card with a shared element.

      Hand in: Figma prototype and an MP4

  5. Module 5 Weeks 11–12 · After Effects

    Brand motion

    How a brand's character turns into speed, curves and rhythm. Logo animation and motion rules for the whole system.

    ExerciseA 2-second logo reveal in two characters: strict and playful

    1. 11

      Brand character in motion

      • Turning brand traits into speed and curves
      • One-page motion principles for a brand system
      • Shape layers, Trim Paths and masks for logos

      Practice Animate one button in two characters, strict and playful, and describe the difference.

      Hand in: Two MP4s and a principles page

    2. 12

      The logo reveal

      • Building a logo from Trim Paths and masks
      • Overshoot and settle: an inertia expression
      • Exporting with alpha: ProRes 4444 or Lottie

      Practice Make a 2-second logo reveal in two versions: strict and playful.

      Hand in: Two MP4s, 2 seconds each

  6. Module 6 Weeks 13–14 · After Effects

    Type in motion

    After Effects text animators, variable fonts, animated numbers and headlines inside a product.

    ExerciseKinetic word: the motion carries the meaning of the word itself

    1. 13

      Text animators

      • Animators and the Range Selector: letters, words, lines
      • A variable font's wght axis in After Effects
      • Counting numbers: Slider Control and an expression

      Practice Animate a headline and an amount counter for a product screen.

      Hand in: MP4, 3 seconds, 60 fps

    2. 14

      The kinetic word

      • How motion carries the meaning of a word
      • How long a word must hold to be read
      • From literal to metaphorical: reviewing options

      Practice Animate a word so that the motion carries its meaning.

      Hand in: MP4, 3–5 seconds, 60 fps

  7. Module 7 Weeks 15–17 · Rive, Lottie

    Rive and Lottie

    Interactive product animation: a Rive state machine, Lottie export via Bodymovin, keeping file weight in check.

    ExerciseA “Favourite” icon with a state machine: hover, press, undo

    1. 15

      Lottie via Bodymovin

      • What Bodymovin exports and what it drops
      • File weight: shape layers, bitmaps, expressions
      • Checking a Lottie in browsers and on phones

      Practice Export an icon animation to Lottie and cut its file weight.

      Hand in: JSON file, weight before and after

    2. 16

      First steps in Rive

      • Artboards, shapes and timelines in Rive
      • Bringing an icon over from Figma as SVG
      • Idle and active animations

      Practice Draw the “Favourite” icon in Rive and animate its two states.

      Hand in: A .riv file with two animations

    3. 17

      Rive state machines

      • States, transitions and conditions in a state machine
      • Inputs: boolean, trigger and number
      • Listeners for hover and click

      Practice Build the “Favourite” icon with a state machine: hover, press, undo.

      Hand in: A .riv file and a screen recording

  8. Module 8 Weeks 18–20 · Figma, CSS

    Developer handoff and final project

    Motion specs, CSS transitions and the Web Animations API — just enough to speak the same language as front-end developers. Final project defence.

    ExerciseAn animation spec: durations, delays and cubic-bezier for every transition

    1. 18

      CSS and Web Animations

      • CSS transitions: property, duration, timing function
      • Web Animations API: keyframes and animate()
      • prefers-reduced-motion: a version for motion-sensitive users

      Practice Choose a scenario for the final project and storyboard 3–5 screens.

      Hand in: A storyboard of 3–5 screens

    2. 19

      Building the final project

      • From storyboard to prototype: the working order
      • One scale of durations and curves throughout
      • Testing the prototype on a real phone

      Practice Build the transitions and micro-interactions for every screen in Figma.

      Hand in: Figma prototype, 3–5 screens

    3. 20

      Spec and defence

      • A spec as a table or annotated frames
      • Presenting a project: problem, decisions, trade-offs
      • How the project defence at the live session works

      Practice Specify the duration, delay and cubic-bezier for every transition.

      Hand in: Prototype and animation spec

Who it is for

For UI/UX and graphic designers who are confident in Figma and want their interfaces to move with purpose.

What you will learn

  • Choose timing and curves in the After Effects Graph Editor and explain the choice
  • Build micro-interactions and screen transitions in Figma with Smart Animate
  • Make interactive animation in Rive with a state machine and export Lottie via Bodymovin
  • Write a motion spec for developers: durations, delays, cubic-bezier values
  • Show a final project in your portfolio: an animated product scenario

What you need to start

  • Confident Figma skills: components, auto layout, variants
  • No After Effects experience needed: module one covers the basics
  • A computer that runs After Effects comfortably: 16 GB of RAM or more
  • 8–10 hours a week for lessons and exercises

04 Final project

The final project is an animated product scenario: 3–5 screens with transitions, micro-interactions and a spec for developers. You defend it at a live review.

05 Plans

Plans

Price for the whole course. Pay in 2–6 monthly parts with no surcharge.

  • Self-paced

    Lessons at your own pace with written exercise reviews.

    $690

    or in parts from $115 a month

    • All lessons and course materials
    • A written, timecoded review of every exercise within 3 working days
    • Cohort chat

  • With a mentor

    A live group review every week.

    $1,090

    or in parts from $182 a month

    • Everything in Self-paced
    • A weekly 90-minute live session
    • Work reviewed on screen, with the mentor adjusting curves during the session
    • Final project defence at a live review

  • One-to-one

    Private sessions with the mentor you choose.

    $1,890

    or in parts from $315 a month

    • Everything in With a mentor
    • A weekly 60-minute one-to-one session
    • Session times by arrangement
    • A portfolio review before the defence

Cohorts