Веб дизайн урок по анимации || 3d слайдер в Figma

Рет қаралды 14,209

Жыл бұрын

Веб дизайн урок по анимации || 3d слайдер в Figma
Добро пожаловать на мой урок по созданию анимации 3d слайдера в Figma без использования дополнительных плагинов! В этом уроке вы узнаете, как использовать встроенные возможности Figma для создания потрясающей анимации трехмерного слайдера.
Мы начнем с основных принципов анимации и рассмотрим, как создать трехмерный эффект, который захватит внимание зрителей.
Вы узнаете, как использовать временные функции и кривые анимации для создания плавных переходов и динамичных эффектов.
Основываясь на этих знаниях, вы сможете создать собственный трехмерный слайдер, который будет выглядеть профессионально и захватывающе.
Не требуется никакого предварительного опыта в анимации или использовании Фигмы. Этот урок подойдет как начинающим, так и опытным дизайнерам, желающим расширить свои навыки и создать захватывающую анимацию трехмерного слайдера. Присоединяйтесь к нам и дайте своим проектам новое измерение с помощью Фигмы!

Пікірлер: 25

@Nelya_web Жыл бұрын

Спасибо, очень интересно.

@thelikedesign 11 ай бұрын

Благодарю!

@veneravap3401 6 ай бұрын

Каким образом вы подогнали картинку стикера? Вы показываете , как накладываете на него прямоугольник, закругляете углы, а дальше у вас уже готовый обрезанный стикер. Только непонятно как это получилось, момент на 2 минуте Спасибо.

@thelikedesign 6 ай бұрын

Видимо обрезала этот момент на монтаже. Вы накладываете эллипс на наклейку, затем помещаете наклейку выше эллипса на один слой, выбираете оба слоя и нажимаете кнопку Intersect selection. Она находится сверху по центру черной панели инструментов и активизируется, когда выбраны два слоя.

@goose_home 3 ай бұрын

Спасибо за урок! Подскажите, пожалуйста, анимацию, созданную из прототипов можно сохранить как видеоролик?

@thelikedesign 3 ай бұрын

В фигме нет такой функции, но есть плагин Export to GIF/Video. Попробуйте 👍

@Nelya_web Жыл бұрын

Попробовала, всё получилось

@thelikedesign Жыл бұрын

Отлично!

@user-rk5wt1pf5c Ай бұрын

как задать привязку к полю для фрейма с фруктами?

@madmouzel Жыл бұрын

спасибо! эту анимацию потом как-то выгружать для разработчика или программист сможет использует код?

@thelikedesign Жыл бұрын

Честно говоря, думаю, что нельзя это сделать. Возможно есть плагины для этих целей. Надо изучить вопрос 🤔

@user-ye3yi5pe8d 7 ай бұрын

А нельзя воспользоваться vimeo,чтобы загрузить видео?

@Vit_Army 2 ай бұрын

Сделать в фигме анимацию не проблема..как ее вытащить потом...бессмыслица какая то

@nikolay9386 3 ай бұрын

Важен ли формат картинки .png? Или с jpeg?

@thelikedesign 3 ай бұрын

Картинка должна быть на прозрачном фоне, потому лучше пнг или удалите фон с помощью плагина bg remove.

@nikolay9386 3 ай бұрын

@@thelikedesign благодарю! Но как то не получается наложить картинку на банку )) этот intersect selection не вижу )

@nikolay9386 3 ай бұрын

@@thelikedesign эта баночка сведет меня с ума )))

@thelikedesign 3 ай бұрын

@@nikolay9386 😅

@user-po6xs4tb3m 4 ай бұрын

Классно!!! Но у меня ничего не получилось(😢 Не смогла вырезать и не нашла таких наклеек в строчку... Расстроилась(

@ArthurKa-yd5un 4 ай бұрын

😢

@user-vv1wz4uo9z Ай бұрын

@@ArthurKa-yd5un здравствуйте, где найти такие наклейки?

@ArthurKa-yd5un Ай бұрын

@@user-vv1wz4uo9z, здравствуйте. Я не знаю 😢 Спасибо за обращение, до свидания.

@lil4361 Жыл бұрын

Попробовала сделать баночку, получилось! Спасибо большое)

@thelikedesign Жыл бұрын

Супер!