Мы используем cookie для стабильной работы сервиса. Подробнее

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

4.7
ФорматОнлайн
Длительность4-5 часов в неделю
Объём11 занятий
УровеньСредний
По окончанииСертификат Stepik
О курсе

Подробнее

Курс для продолжающих обучение: Этот курс для тех кто уже знает основы 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

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «Веб дизайн в Figma. Профессиональное прототипирование и анимация» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Направления:Веб-дизайнерFigma

Информация обновлена 28 июля 2026 г.

Продолжить выбор

Похожие курсы

Начать без затрат

Бесплатные курсы