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

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

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

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

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Учеников на курсе 1 622
Сертификаты, выданные на курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация»Сертификатов выдано 266
Отзывы о курсе «Веб дизайн в 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 элементы