Курс на Stepik
Обложка курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация» на Stepik
2 990 ₽

Веб дизайн в Figma. Профессиональное прототипирование и анимация ★ 4.969

Открыть на
STEPIK.ORG

Курс Figma «Профессиональное прототипирование и анимация» — это практическое погружение в создание интерактивных интерфейсов и продвинутых анимаций. Вы освоите прототипирование, компоненты и варианты, переменные и логику (IF/ELSE), а также научитесь создавать сложные эффекты — от overlay и навигации до параллакса и 3D.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Учеников на курсе 1 631
Сертификаты, выданные на курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Сертификатов выдано 268
Отзывы о курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Отзывов получено 64
Рейтинг курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Рейтинг курса 4.969
Уроки в курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Количество уроков 48
Тесты в курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Количество квизов 1
Время прохождения курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Время прохождения курса —
Стоимость курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Стоимость курса 2 990 ₽ —
Обновления курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Обновления курса — —
Дата публикации курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Дата публикации курса — ———
Последнее обновление курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Последнее обновление — ———
Сложность normal — ———

Содержание курса

Разделы в курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация» 16 разделов Уроки в курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация» 48 уроков Тесты в курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация» 1 тест Время прохождения курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация» 6 ч. Последнее обновление курса «Веб дизайн в Figma. Профессиональное прототипирование и анимация» обн. 17 мая 2026

Подготовка

3 урока
1. О чем этот курс ↗
2. Скачиваем материалы для курса ↗
3. Оставайтесь со мной на связи ↗

Введение в прототипирование (Новая версия курса)

3 урока
1. Создаем первую анимацию ↗
2. Настройки вкладки Prototype ↗
3. Основные настройки анимирования ↗

Motion design.

15 уроков
1. Об обновлении интерфейса (Смотреть опционально) ↗
2. О чем этот блок ↗
3. Создаем первую анимацию ↗
4. Как работают анимации в Figma ↗
5. Что такое кривые Безье ↗
6. Анимируем мобильное приложение "Фото-сток" ↗
7. Практика. Создайте собственную анимацию в проекте "Фото-сток". ↗
8. Пример преподавателя. Создаем анимацию в проекте "Фото-сток". ↗
9. Как создать Parallax Effect ↗
10. Создаем анимацию гамбургера ↗
11. Создаем анимацию загрузки страницы ↗
12. Как работают Flows в прототипах. Организация страниц в проекте. ↗
13. Как создать анимацию "темной" и "светлой" темы через кнопку ↗
14. Как создать обложку проекту ↗
15. Практика. Создайте свой Parallax Effect ↗

Базовые настройки прототипов (Новая версия курса)

6 уроков
1. Как работает настройка скроллинга ↗
2. Как работают Fixed & Sticky ↗
3. Анимируем приложение ↗
4. Подробно про настройку open overlay ↗
5. Поведение анимации во времени (Кривые) ↗
6. Создаем анимацию nav menu ↗

Использование "вариантов" в анимациях

15 уроков
1. О чем этот блок ↗
2. Что такое "Варианты в figma" ↗
3. Как использовать "варианты" в анимациях ↗
4. Кнопка быстрого доступа к "вариантам" ↗
5. Как тестировать ваш макет на мобильном девайсе ↗
6. Как работает spinner. Анимируем текст ↗
7. Как создать анимацию как на сайте apple ↗
8. Как запустить видео файл в figma ↗
9. Как использовать GIF в своих проектах. Сток анимированных иконок ↗
10. Практика. Создайте анимацию "360 градусов" ↗
11. Пример преподавателя. Как создать анимацию "360 градусов " ↗
12. Обновление 2023. Как работают переменные. ↗
13. Обновления 2023. Обновления Auto Layout ↗
14. Обновления 2023. Прототипирование + переменные ↗
15. Обновления 2023. Куда делась вкладка Inspect!? ↗

Компоненты и варианты в прототипировании (Новая версия курса)

6 уроков
1. Как работают компоненты ↗
2. Как работают варианты ↗
3. Как работает swap instance ↗
4. Знакомство с переменными ↗
5. Особенности вариантов в прототипировании ↗
6. Прототипирование варинтами меню ↗

Создание анимаций через плагин Motion Plugin

3 урока
1. Как работает плагин Motion Plugin ↗
2. Используем плагин вместе с масками ↗
3. Экспорт анимации из плагина ↗

Компоненты в анимировании (Новая версия курса)

6 уроков
1. Создаем прелоадер приложения ↗
2. Прелоадер с помощью вариантов ↗
3. Создаем пралакс эффект часть 1 ↗
4. Создаем пралакс эффект часть 2 ↗
5. Два действия на один триггер ↗
6. Делаем еще один параллакс эффект ↗

Современные стили. Градиент / Стекло / 3D

11 уроков
1. Как создать анимацию градиента ↗
2. Как работают режимы наложения ↗
3. Создаем эффект "Paper Cut" с градиентом ↗
4. Как создать эффект "стекла" ↗
5. Как сделать эффект "стекла" более объемным ↗
6. Как создавать собственные стеклянные иконки ↗
7. Как превратить обычную иконку в стеклянную ↗
8. Практика. Создайте собственный эффект стекла ↗
9. Как создавать эффект 3D из обычных элементов ↗
10. Как создать иконку в стиле 3D ↗
11. Создаем 3D элементы на стартовой странице сайта ↗

Главные правила UX - пользовательского опыта

13 уроков
1. О чем этот блок ↗
2. Что такое дизайн ↗
3. Главное правило. Не заставляйте людей думать ↗
4. Как люди на самом деле используют браузер ↗
5. Привычки пользователей и как извлекать из них выгоду ↗
6. Выбор без размышлений ↗
7. Сокращайте текст ↗
8. Практика. Сделайте простым и удобным ↗
9. Пример преподавателя. Сделайте простым и удобным ↗
10. Используйте навигацию на сайте ↗
11. Все мы разные ↗
12. Проводите тестирование ↗
13. Заключение. Постулаты хорошего веб дизайна ↗

Видео и 3D-анимация (Новая версия курса)

3 урока
1. Разница между платной и бесплатной версиями Figma ↗
2. Покадровое прототипирование видео ↗
3. 3D Анимация ↗

Что дальше?

2 урока
1. Моя книга по UX-Исследованиям ↗
2. До новых встреч! ↗

Профессиональное использование переменных (Новая версия курса)

4 урока
1. Создаем переменные цвета ↗
2. Что такое токены и alias ↗
3. Создаем токены для всех свойств ↗
4. Тёмная и светлая тема в один клик ↗

Прототипирование переменных (Новая версия курса)

8 уроков
1. Как оплатить Figma из России ↗
2. Как работает режим Set Variable ↗
3. Прототипирование табов с помощью переменных ↗
4. Изменение нескольких переменных одновременно ↗
5. Как работает условное ветвление (IF/ELSE) ↗
6. Финальная практика ↗
7. Пример преподавателя часть 1 ↗
8. Пример преподавателя часть 2 ↗

Получите ваш сертификат

1 урок
1. Тест для получения сертификата об окончании курса ↗

Бонус: дополнительные анимации (Новая версия курса)

6 уроков
1. Анимация градиента ↗
2. Как работают режимы наложения ↗
3. Как работает Paper Cut Effect ↗
4. Как создать эффект 3D ↗
5. Создаем объемную иконку Figma ↗
6. Создаем 3D элементы ↗