Веб дизайн в Figma. Профессиональное прототипирование и анимация
Подробнее
Что нужно для старта
- Для прохождения курса, необходимы знания по основам программы figma.
Что вы получите
- Изучите, как создавать современные визуальные стили в Figma
- Освоите создание эффектов «стекла» (glassmorphism) в интерфейсах
- Научитесь создавать 3D-эффекты из любых элементов в Figma
- Освоите современные подходы к работе с градиентами и их анимацией
- Полностью разберётесь в создании анимаций в Figma — от базовых до продвинутых
- Научитесь создавать 360°-анимации прямо в Figma
- Сможете создавать анимации в стиле Apple
- Научитесь анимировать любые элементы интерфейса: кнопки, меню, иконки и др.
- Освоите использование Variants для создания сложных и впечатляющих анимаций
- Поймёте, как пользователи реально взаимодействуют с интерфейсами
- Научитесь делать интерфейсы простыми, понятными и удобными
Для кого этот курс
- Для веб дизайнеров и веб разработчиков
Программа курса
- О чем этот курс
- Скачиваем материалы для курса
- Оставайтесь со мной на связи
- Создаем первую анимацию
- Настройки вкладки Prototype
- Основные настройки анимирования
- Как работает настройка скроллинга
- Как работают Fixed & Sticky
- Анимируем приложение
- Подробно про настройку open overlay
- Поведение анимации во времени (Кривые)
- Создаем анимацию nav menu
- Как работают компоненты
- Как работают варианты
- Как работает swap instance
- Знакомство с переменными
- Особенности вариантов в прототипировании
- Прототипирование варинтами меню
- Создаем прелоадер приложения
- Прелоадер с помощью вариантов
- Создаем пралакс эффект часть 1
- Создаем пралакс эффект часть 2
- Два действия на один триггер
- Делаем еще один параллакс эффект
- Разница между платной и бесплатной версиями Figma
- Покадровое прототипирование видео
- 3D Анимация
- Создаем переменные цвета
- Что такое токены и alias
- Создаем токены для всех свойств
- Тёмная и светлая тема в один клик
- Как оплатить Figma из России
- Как работает режим Set Variable
- Прототипирование табов с помощью переменных
- Изменение нескольких переменных одновременно
- Как работает условное ветвление (IF/ELSE)
- Финальная практика
- Пример преподавателя часть 1
- Пример преподавателя часть 2
- Анимация градиента
- Как работают режимы наложения
- Как работает Paper Cut Effect
- Как создать эффект 3D
- Создаем объемную иконку Figma
- Создаем 3D элементы
- Моя книга по UX-Исследованиям
- До новых встреч!
- Тест для получения сертификата об окончании курса
01Подготовка
- О чем этот курс
- Скачиваем материалы для курса
- Оставайтесь со мной на связи
02Введение в прототипирование
- Создаем первую анимацию
- Настройки вкладки Prototype
- Основные настройки анимирования
03Базовые настройки прототипов
- Как работает настройка скроллинга
- Как работают Fixed & Sticky
- Анимируем приложение
- Подробно про настройку open overlay
- Поведение анимации во времени (Кривые)
- Создаем анимацию nav menu
04Компоненты и варианты в прототипировании
- Как работают компоненты
- Как работают варианты
- Как работает swap instance
- Знакомство с переменными
- Особенности вариантов в прототипировании
- Прототипирование варинтами меню
05Компоненты в анимировании
- Создаем прелоадер приложения
- Прелоадер с помощью вариантов
- Создаем пралакс эффект часть 1
- Создаем пралакс эффект часть 2
- Два действия на один триггер
- Делаем еще один параллакс эффект
06Видео и 3D-анимация
- Разница между платной и бесплатной версиями Figma
- Покадровое прототипирование видео
- 3D Анимация
07Профессиональное использование переменных
- Создаем переменные цвета
- Что такое токены и alias
- Создаем токены для всех свойств
- Тёмная и светлая тема в один клик
08Прототипирование переменных
- Как оплатить Figma из России
- Как работает режим Set Variable
- Прототипирование табов с помощью переменных
- Изменение нескольких переменных одновременно
- Как работает условное ветвление (IF/ELSE)
- Финальная практика
- Пример преподавателя часть 1
- Пример преподавателя часть 2
09Бонус: дополнительные анимации
- Анимация градиента
- Как работают режимы наложения
- Как работает Paper Cut Effect
- Как создать эффект 3D
- Создаем объемную иконку Figma
- Создаем 3D элементы
10Что дальше?
- Моя книга по UX-Исследованиям
- До новых встреч!
11Получите ваш сертификат
- Тест для получения сертификата об окончании курса
Сертификат Stepik
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 28 июля 2026 г.

Stepik 















