Stepik Веб дизайн в Figma. Профессиональное прототипирование и анимация
О курсе
Подробнее
Курс для продолжающих обучение:
Этот курс для тех кто уже знает основы Figma, но хочет изучить способы прототипирования и анимации всех элементов макета
Внутри курса вас ждёт:
Введение в прототипирование в Figma: создание первой анимации, разбор вкладки Prototype и базовых настроек анимации.
Освоение ключевых параметров прототипов: скроллинг, поведение элементов (Fixed и Sticky), работа с overlay и настройка анимационных кривых.
Создание интерактивных элементов интерфейса: анимация приложения и навигационного меню.
Работа с компонентами и вариантами: понимание логики компонентов, вариантов, swap instance и переменных.
Освоение особенностей прототипирования с использованием вариантов и построение интерактивных меню.
Создание анимаций с использованием компонентов: прелоадеры, параллакс-эффекты и работа с несколькими действиями на один триггер.
Изучение продвинутых техник анимации, включая сложные сценарии взаимодействия.
Работа с видео и 3D-анимацией: покадровое прототипирование и создание 3D-эффектов.
Глубокое изучение переменных: создание цветовых переменных, токенов и alias.
Настройка светлой и тёмной темы в один клик с помощью переменных.
Прототипирование с использованием переменных: работа с Set Variable, табами и изменением нескольких переменных одновременно.
Понимание логики условий (IF/ELSE) в прототипировании.
Практика на примерах преподавателя и финальное закрепление материала.
Дополнительные техники анимации: градиенты, режимы наложения, Paper Cut эффект и создание 3D-элементов.
Что вас ждёт в курсе:
Большое количество видеоуроков по прототипированию и анимации в Figma.
Практические примеры и разбор реальных интерфейсных решений.
Пошаговое освоение всех инструментов — от базовых до продвинутых.
Финальная практика для закрепления навыков.
Сертификат по окончании курса.
Гарантия возврата денег
И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течении 30 дней.
Поддержка
Автор курса отвечает на все вопросы в комментариях к урокам — ежедневно.
Присоединяйтесь ко мне и вместе, мы изучим то как создавать классные анимации и крутые эффекты, прямо в Figma.
До встречи на уроках!
Требования
Что нужно для старта
- Для прохождения курса, необходимы знания по основам программы figma.
Результат
Что вы получите
- Изучите, как создавать современные визуальные стили в Figma
- Освоите создание эффектов «стекла» (glassmorphism) в интерфейсах
- Научитесь создавать 3D-эффекты из любых элементов в Figma
- Освоите современные подходы к работе с градиентами и их анимацией
- Полностью разберётесь в создании анимаций в Figma — от базовых до продвинутых
- Научитесь создавать 360°-анимации прямо в Figma
- Сможете создавать анимации в стиле Apple
- Научитесь анимировать любые элементы интерфейса: кнопки, меню, иконки и др.
- Освоите использование Variants для создания сложных и впечатляющих анимаций
- Поймёте, как пользователи реально взаимодействуют с интерфейсами
- Научитесь делать интерфейсы простыми, понятными и удобными
Аудитория
Для кого этот курс
- Для веб дизайнеров и веб разработчиков
Содержание
11 занятийПрограмма курса
№ТемаЧто внутри
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Получите ваш сертификат
- Тест для получения сертификата об окончании курса
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 г.
Продолжить выбор
Похожие курсы
Начать без затрат
