Перейти к содержанию
Кадр, на главную
EN: English version

20 нед. Флагманский курс

Начинаем с тайминга и кривых, потом переходим к прототипам в Figma, интерактивной анимации в Rive и передаче анимации в разработку. Каждую неделю — упражнение и разбор ментора.

Ближайший старт
13 октября 2026
Длительность
20 недель
Живое занятие
вторник, 19:00 по Москве, 90 минут
Нагрузка
8–10 часов в неделю
Группа
до 18 человек
Подать заявкуТарифы

02 Недели

20 недель подряд

Каждый кадр — одна неделя: три темы урока, практика и то, что вы сдаёте ментору в воскресенье.

  1. Неделя 1Модуль 1 · Тайминг и спейсинг

    Ключевые кадры и тайминг

    • Композиции, слои и ключевые кадры в After Effects
    • Тайминг и спейсинг: чем они отличаются
    • Какие принципы анимации работают в интерфейсе

    ПрактикаАнимировать проход квадрата через экран за 12, 24 и 36 кадров и сравнить.

    → Три MP4, 60 fps

  2. Неделя 2Модуль 1 · Тайминг и спейсинг

    Прыгающий мяч

    • Сжатие и растяжение без потери объёма
    • Упреждение и инерция после остановки
    • Дуги и затухание отскоков

    ПрактикаАнимировать прыгающий мяч: сжатие и растяжение, затухающие отскоки.

    → MP4, 4 секунды, 60 fps

  3. Неделя 3Модуль 2 · Кривые и easing

    Кривые в Graph Editor

    • График значений и график скорости
    • Ручки ключей и влияние в Keyframe Velocity
    • Linear, ease-in, ease-out и ease-in-out

    ПрактикаПовторить одно движение с четырьмя типами кривых и сравнить графики скорости.

    → MP4: четыре варианта рядом

  4. Неделя 4Модуль 2 · Кривые и easing

    Появление и исчезновение

    • Почему появлению подходит ease-out, а исчезновению — ease-in
    • Как длительность зависит от расстояния и размера
    • Как перевести кривую из After Effects в cubic-bezier

    ПрактикаАнимировать появление карточки с тремя кривыми, выбрать одну и объяснить выбор.

    → MP4 и обоснование в 3–5 предложениях

  5. Неделя 5Модуль 3 · Микровзаимодействия

    Состояния компонентов

    • Состояния кнопки, переключателя и поля ввода
    • Варианты и интерактивные компоненты в Figma
    • Как Smart Animate сопоставляет слои по именам

    ПрактикаСобрать переключатель с анимацией между состояниями через Smart Animate.

    → Ссылка на прототип в Figma

  6. Неделя 6Модуль 3 · Микровзаимодействия

    Отклик на действие

    • Триггеры: нажатие, наведение, задержка
    • Кривые и пружины в прототипах Figma
    • Переменные и условия для состояний прототипа

    ПрактикаСобрать поле ввода с состояниями фокуса, ошибки и успешной проверки.

    → Прототип в Figma, три состояния

  7. Неделя 7Модуль 3 · Микровзаимодействия

    Состояние загрузки

    • Сценарий загрузки: нажатие, ожидание, результат
    • Спиннер, прогресс или скелетон: что выбрать
    • Как показать долгое ожидание и не раздражать

    ПрактикаСобрать состояние загрузки: от нажатия кнопки до результата.

    → Прототип в Figma и запись экрана

  8. Неделя 8Модуль 4 · Переходы между экранами

    Навигационные переходы

    • Пространственная модель навигации: вперёд, назад, поверх
    • Направление движения показывает иерархию экранов
    • Navigate to, Open overlay и типы переходов в Figma

    ПрактикаСобрать прототип из двух экранов: переход вперёд и модальное окно.

    → Ссылка на прототип в Figma

  9. Неделя 9Модуль 4 · Переходы между экранами

    Хореография экрана

    • Что двигается первым: порядок и задержки
    • Каскадное появление элементов списка
    • Экран в After Effects: прекомпозиции и motion blur

    ПрактикаАнимировать в After Effects появление списка: элементы входят по очереди.

    → MP4, 2 секунды, 60 fps

  10. Неделя 10Модуль 4 · Переходы между экранами

    Общий элемент

    • Общий элемент: один объект на двух экранах
    • Масштаб, позиция и маска вместо простого растворения
    • Smart Animate или After Effects: где что уместно

    ПрактикаСобрать переход из списка в карточку товара с общим элементом.

    → Прототип в Figma и MP4

  11. Неделя 11Модуль 5 · Моушн бренда

    Характер бренда в движении

    • Как свойства бренда становятся скоростью и кривыми
    • Принципы движения для фирменного стиля на одной странице
    • Shape-слои, Trim Paths и маски для логотипа

    ПрактикаАнимировать одну кнопку в строгом и игривом характере и описать разницу.

    → Два MP4 и страница принципов

  12. Неделя 12Модуль 5 · Моушн бренда

    Появление логотипа

    • Собираем логотип из Trim Paths и масок
    • Перелёт и затухание: выражение для инерции
    • Экспорт с прозрачностью: ProRes 4444 или Lottie

    ПрактикаСделать появление логотипа за 2 секунды в двух вариантах: строгом и игривом.

    → Два MP4 по 2 секунды

  13. Неделя 13Модуль 6 · Типографика в движении

    Текстовые аниматоры

    • Аниматоры и Range Selector: по буквам, словам, строкам
    • Ось wght переменного шрифта в After Effects
    • Анимация чисел: Slider Control и выражение

    ПрактикаАнимировать заголовок и счётчик суммы для экрана продукта.

    → MP4, 3 секунды, 60 fps

  14. Неделя 14Модуль 6 · Типографика в движении

    Кинетическое слово

    • Как движение передаёт смысл слова
    • Сколько времени слову нужно для прочтения
    • Разбор вариантов: от буквального к метафоре

    ПрактикаАнимировать слово так, чтобы движение передавало его смысл.

    → MP4, 3–5 секунд, 60 fps

  15. Неделя 15Модуль 7 · Rive и Lottie

    Lottie через Bodymovin

    • Что Bodymovin экспортирует, а что нет
    • Вес файла: shape-слои, растровые картинки, выражения
    • Проверка Lottie в браузере и на телефоне

    ПрактикаЭкспортировать анимацию иконки в Lottie и уменьшить вес файла.

    → JSON-файл, вес до и после

  16. Неделя 16Модуль 7 · Rive и Lottie

    Первые шаги в Rive

    • Артборды, фигуры и таймлайны в Rive
    • Импорт иконки из Figma через SVG
    • Анимации покоя и активного состояния

    ПрактикаНарисовать иконку «В избранное» в Rive и анимировать два состояния.

    → Файл .riv с двумя анимациями

  17. Неделя 17Модуль 7 · Rive и Lottie

    State machine в Rive

    • Состояния, переходы и условия в state machine
    • Входы: boolean, trigger и number
    • Listeners: реакция на наведение и нажатие

    ПрактикаСобрать иконку «В избранное» со state machine: наведение, нажатие, отмена.

    → Файл .riv и запись экрана

  18. Неделя 18Модуль 8 · Передача в разработку и итоговый проект

    CSS и Web Animations API

    • CSS transitions: свойство, длительность, timing-function
    • Web Animations API: ключевые кадры и animate()
    • prefers-reduced-motion: версия для тех, кому движение мешает

    ПрактикаВыбрать сценарий итогового проекта и нарисовать раскадровку на 3–5 экранов.

    → Раскадровка на 3–5 экранов

  19. Неделя 19Модуль 8 · Передача в разработку и итоговый проект

    Сборка итогового проекта

    • От раскадровки к прототипу: порядок работы
    • Одна шкала длительностей и кривых на весь сценарий
    • Проверка прототипа на реальном телефоне

    ПрактикаСобрать в Figma переходы и микровзаимодействия для всех экранов сценария.

    → Прототип в Figma, 3–5 экранов

  20. Неделя 20Модуль 8 · Передача в разработку и итоговый проект

    Спецификация и защита

    • Спецификация: таблица или подписи на макетах
    • Как рассказать о проекте: задача, решения, компромиссы
    • Как проходит защита проекта на живом занятии

    ПрактикаРасписать для каждого перехода длительность, задержку и cubic-bezier.

    → Прототип и спецификация анимации

03 Модули

Модули и упражнения

20 недель, 8 модулей и итоговый проект для портфолио.

  1. Модуль 1 Недели 1–2 · After Effects

    Тайминг и спейсинг

    Как принципы классической анимации работают в интерфейсе: тайминг, спейсинг, упреждение, сжатие и растяжение.

    УпражнениеПрыгающий мяч: сжатие и растяжение, затухающие отскоки

    1. 01

      Ключевые кадры и тайминг

      • Композиции, слои и ключевые кадры в After Effects
      • Тайминг и спейсинг: чем они отличаются
      • Какие принципы анимации работают в интерфейсе

      Практика Анимировать проход квадрата через экран за 12, 24 и 36 кадров и сравнить.

      Сдаёте: Три MP4, 60 fps

    2. 02

      Прыгающий мяч

      • Сжатие и растяжение без потери объёма
      • Упреждение и инерция после остановки
      • Дуги и затухание отскоков

      Практика Анимировать прыгающий мяч: сжатие и растяжение, затухающие отскоки.

      Сдаёте: MP4, 4 секунды, 60 fps

  2. Модуль 2 Недели 3–4 · After Effects

    Кривые и easing

    Graph Editor: графики значений и скорости. Почему для появления подходит ease-out, а для исчезновения — ease-in.

    УпражнениеПоявление карточки с тремя разными кривыми — выбрать одну и объяснить выбор

    1. 03

      Кривые в Graph Editor

      • График значений и график скорости
      • Ручки ключей и влияние в Keyframe Velocity
      • Linear, ease-in, ease-out и ease-in-out

      Практика Повторить одно движение с четырьмя типами кривых и сравнить графики скорости.

      Сдаёте: MP4: четыре варианта рядом

    2. 04

      Появление и исчезновение

      • Почему появлению подходит ease-out, а исчезновению — ease-in
      • Как длительность зависит от расстояния и размера
      • Как перевести кривую из After Effects в cubic-bezier

      Практика Анимировать появление карточки с тремя кривыми, выбрать одну и объяснить выбор.

      Сдаёте: MP4 и обоснование в 3–5 предложениях

  3. Модуль 3 Недели 5–7 · Figma

    Микровзаимодействия

    Состояния кнопок, переключателей и полей ввода. Интерактивные компоненты и Smart Animate в Figma.

    УпражнениеСостояние загрузки: от нажатия кнопки до результата

    1. 05

      Состояния компонентов

      • Состояния кнопки, переключателя и поля ввода
      • Варианты и интерактивные компоненты в Figma
      • Как Smart Animate сопоставляет слои по именам

      Практика Собрать переключатель с анимацией между состояниями через Smart Animate.

      Сдаёте: Ссылка на прототип в Figma

    2. 06

      Отклик на действие

      • Триггеры: нажатие, наведение, задержка
      • Кривые и пружины в прототипах Figma
      • Переменные и условия для состояний прототипа

      Практика Собрать поле ввода с состояниями фокуса, ошибки и успешной проверки.

      Сдаёте: Прототип в Figma, три состояния

    3. 07

      Состояние загрузки

      • Сценарий загрузки: нажатие, ожидание, результат
      • Спиннер, прогресс или скелетон: что выбрать
      • Как показать долгое ожидание и не раздражать

      Практика Собрать состояние загрузки: от нажатия кнопки до результата.

      Сдаёте: Прототип в Figma и запись экрана

  4. Модуль 4 Недели 8–10 · Figma, After Effects

    Переходы между экранами

    Навигационные переходы, общий элемент на двух экранах, хореография: что двигается первым и почему.

    УпражнениеПереход из списка в карточку товара с общим элементом

    1. 08

      Навигационные переходы

      • Пространственная модель навигации: вперёд, назад, поверх
      • Направление движения показывает иерархию экранов
      • Navigate to, Open overlay и типы переходов в Figma

      Практика Собрать прототип из двух экранов: переход вперёд и модальное окно.

      Сдаёте: Ссылка на прототип в Figma

    2. 09

      Хореография экрана

      • Что двигается первым: порядок и задержки
      • Каскадное появление элементов списка
      • Экран в After Effects: прекомпозиции и motion blur

      Практика Анимировать в After Effects появление списка: элементы входят по очереди.

      Сдаёте: MP4, 2 секунды, 60 fps

    3. 10

      Общий элемент

      • Общий элемент: один объект на двух экранах
      • Масштаб, позиция и маска вместо простого растворения
      • Smart Animate или After Effects: где что уместно

      Практика Собрать переход из списка в карточку товара с общим элементом.

      Сдаёте: Прототип в Figma и MP4

  5. Модуль 5 Недели 11–12 · After Effects

    Моушн бренда

    Как характер бренда превращается в скорость, кривые и ритм. Анимация логотипа и общие принципы движения для всего фирменного стиля.

    УпражнениеПоявление логотипа за 2 секунды в двух вариантах: строгом и игривом

    1. 11

      Характер бренда в движении

      • Как свойства бренда становятся скоростью и кривыми
      • Принципы движения для фирменного стиля на одной странице
      • Shape-слои, Trim Paths и маски для логотипа

      Практика Анимировать одну кнопку в строгом и игривом характере и описать разницу.

      Сдаёте: Два MP4 и страница принципов

    2. 12

      Появление логотипа

      • Собираем логотип из Trim Paths и масок
      • Перелёт и затухание: выражение для инерции
      • Экспорт с прозрачностью: ProRes 4444 или Lottie

      Практика Сделать появление логотипа за 2 секунды в двух вариантах: строгом и игривом.

      Сдаёте: Два MP4 по 2 секунды

  6. Модуль 6 Недели 13–14 · After Effects

    Типографика в движении

    Текстовые аниматоры After Effects, переменные шрифты, анимация цифр и заголовков в продукте.

    УпражнениеКинетическое слово: движение передаёт смысл самого слова

    1. 13

      Текстовые аниматоры

      • Аниматоры и Range Selector: по буквам, словам, строкам
      • Ось wght переменного шрифта в After Effects
      • Анимация чисел: Slider Control и выражение

      Практика Анимировать заголовок и счётчик суммы для экрана продукта.

      Сдаёте: MP4, 3 секунды, 60 fps

    2. 14

      Кинетическое слово

      • Как движение передаёт смысл слова
      • Сколько времени слову нужно для прочтения
      • Разбор вариантов: от буквального к метафоре

      Практика Анимировать слово так, чтобы движение передавало его смысл.

      Сдаёте: MP4, 3–5 секунд, 60 fps

  7. Модуль 7 Недели 15–17 · Rive, Lottie

    Rive и Lottie

    Интерактивная анимация для продукта: state machine в Rive, экспорт Lottie через Bodymovin, контроль веса файла.

    УпражнениеИконка «В избранное» со state machine: наведение, нажатие, отмена

    1. 15

      Lottie через Bodymovin

      • Что Bodymovin экспортирует, а что нет
      • Вес файла: shape-слои, растровые картинки, выражения
      • Проверка Lottie в браузере и на телефоне

      Практика Экспортировать анимацию иконки в Lottie и уменьшить вес файла.

      Сдаёте: JSON-файл, вес до и после

    2. 16

      Первые шаги в Rive

      • Артборды, фигуры и таймлайны в Rive
      • Импорт иконки из Figma через SVG
      • Анимации покоя и активного состояния

      Практика Нарисовать иконку «В избранное» в Rive и анимировать два состояния.

      Сдаёте: Файл .riv с двумя анимациями

    3. 17

      State machine в Rive

      • Состояния, переходы и условия в state machine
      • Входы: boolean, trigger и number
      • Listeners: реакция на наведение и нажатие

      Практика Собрать иконку «В избранное» со state machine: наведение, нажатие, отмена.

      Сдаёте: Файл .riv и запись экрана

  8. Модуль 8 Недели 18–20 · Figma, CSS

    Передача в разработку и итоговый проект

    Спецификация анимации, CSS transitions и Web Animations API — ровно столько, чтобы говорить с фронтенд-разработчиками на одном языке. Защита итогового проекта.

    УпражнениеСпецификация анимации: длительности, задержки и cubic-bezier для каждого перехода

    1. 18

      CSS и Web Animations API

      • CSS transitions: свойство, длительность, timing-function
      • Web Animations API: ключевые кадры и animate()
      • prefers-reduced-motion: версия для тех, кому движение мешает

      Практика Выбрать сценарий итогового проекта и нарисовать раскадровку на 3–5 экранов.

      Сдаёте: Раскадровка на 3–5 экранов

    2. 19

      Сборка итогового проекта

      • От раскадровки к прототипу: порядок работы
      • Одна шкала длительностей и кривых на весь сценарий
      • Проверка прототипа на реальном телефоне

      Практика Собрать в Figma переходы и микровзаимодействия для всех экранов сценария.

      Сдаёте: Прототип в Figma, 3–5 экранов

    3. 20

      Спецификация и защита

      • Спецификация: таблица или подписи на макетах
      • Как рассказать о проекте: задача, решения, компромиссы
      • Как проходит защита проекта на живом занятии

      Практика Расписать для каждого перехода длительность, задержку и cubic-bezier.

      Сдаёте: Прототип и спецификация анимации

Кому подойдёт

Для UI/UX- и графических дизайнеров, которые уверенно работают в Figma и хотят осмысленно анимировать свои интерфейсы.

Чему научитесь

  • Подбирать тайминг и кривые в Graph Editor After Effects и объяснять свой выбор
  • Собирать микровзаимодействия и переходы между экранами в Figma со Smart Animate
  • Делать интерактивную анимацию в Rive со state machine и экспортировать Lottie через Bodymovin
  • Писать для разработчиков спецификацию анимации: длительности, задержки, cubic-bezier
  • Собирать анимированный сценарий продукта — таким будет ваш итоговый проект для портфолио

Что нужно для старта

  • Уверенная работа в Figma: компоненты, автолейаут, варианты
  • Опыт в After Effects не нужен — базу даём в первом модуле
  • Компьютер для After Effects: от 16 ГБ оперативной памяти
  • 8–10 часов в неделю на уроки и упражнения

04 Итоговый проект

Анимированный сценарий продукта: 3–5 экранов с переходами, микровзаимодействиями и спецификацией анимации для разработчиков. Проект вы защищаете на живом разборе.

05 Тарифы

Тарифы

Цена за весь курс. Можно оплатить частями на 2–6 месяцев без переплаты.

  • Самостоятельно

    Уроки в своём темпе и письменный разбор упражнений.

    58 000 ₽

    или частями от 9 700 ₽ в месяц

    • Все уроки и материалы курса
    • Письменный разбор каждого упражнения с таймкодом за 3 рабочих дня
    • Чат потока

  • С ментором

    Живой разбор каждую неделю в группе.

    92 000 ₽

    или частями от 15 400 ₽ в месяц

    • Всё из тарифа «Самостоятельно»
    • Живое занятие раз в неделю, 90 минут
    • Разбор работ на экране: ментор правит кривые во время занятия
    • Защита итогового проекта на живом разборе

  • Индивидуально

    Занятия один на один с выбранным ментором.

    164 000 ₽

    или частями от 27 400 ₽ в месяц

    • Всё из тарифа «С ментором»
    • Встреча один на один каждую неделю, 60 минут
    • Время встреч — по договорённости
    • Разбор портфолио перед защитой

Потоки