Как сделать аниммированную карточку в фигме за 1 минуту

Всем привет! Давно ничего не вещала здесь, буду исправляться и первое, чем хочу прервать свое отсутствие это полезностью для дизайнеров, а именно показать, как сделать анимированную карточку)
Если вам легче воспринимать через видео то можете посмотреть видео на ютубе : https://www.youtube.com/channel/UCA0VeResOpZ8BU9YTSCkm-g

Как сделать аниммированную карточку в фигме за 1 минуту

Для начала нам необходимо будет сделать 2 фрейса. Первый экран телефона и второй это сама карточка.
Переходим в режим прототипа и нажимаем на элемент, при клине на который у нас должна открываться карточка и протягивая стрелку ко второму экрану, задаем настройки :
On Click ➝ Open overlay/Manual ➝ Move In/Ease out/300ms
При клике будет выезжать карточка на заданное место справа налево за 300 мс

Как сделать аниммированную карточку в фигме за 1 минуту

Далее при нажатии на крестик мы должны закрыть карточку, чтобы это реализовать мы нажимаем на крестик и вытягиваем стрелку к Close Overlay
Все, буквально за минуту мы анимировали нашу карточку. Подобное внимание к деталям позволяет сделать ваш макет в продакшене идеальным, так как с помощью визуального восприятия вы доносите до заказчика как будут выглядеть подобные элементы, а верстальщику будет удобнее понять, что вы хотите донести.
Не ленитесь потратить какое то время на подобную анимацию в макете, анимация кнопок, карточек, скроллы, ховеры :)

44
Начать дискуссию