1 2 1160x620 - Урок по созданию анимации в Figma, используя плагин Figmotion

В этой статье вы узнаете, как создать в Figma, очень популярный в наши дни, продвинутый прототип.

И снова здравствуйте! После моей первой статьи о проектировании в InVision Studio круговой панели загрузки , я покажу вам нечто другое. Мы освоим Figmotion – плагин Figma, который вы можете использовать для создания продвинутых прототипов. А еще мы воссоздадим 4 самых полезных микровзаимодействия в мобильных приложениях.

На освоение материала, рассматриваемого в данной статье, вам понадобится всего 2-3 часа. Однако, если у вас недостаточно времени или вы новичок в прототипировании, я предлагаю вам читать эту статью в течение четырех дней и изучать одну анимацию каждый день. Но я уверен, что после прочтения этой статьи вы сможете воссоздать множество микровзаимодействий.

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos. До написания этой статьи я планировал полностью воссоздать всё приложение, но, когда я дописал статью, я передумал. Так что сейчас вы читаете лишь часть первоначальной статьи.

Недавно Figma добавила плагины. Использование плагинов делает этот инструмент дизайна еще функциональнее. Мы используем эту новую функцию Figma и воссоздадим микровзаимодействия приложения Google Фото. Из этой статьи вы узнаете, как проектировать и воспринимать микровзаимодействия.

Приступим:

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы будем воссоздавать эти страницы и их микровзаимодействия 🙂
  1. Сядьте и пристегните ремень.
  2. Откройте свой ноутбук и включите его.
  3. Откройте сайт Figma (или, если вы используете десктопную версию Figma, откройте приложение) и создайте новый файл. Чтобы создать новый файл в Figma, просто нажмите иконку «+» в верхней части экрана.
  4. Нажмите клавишу «F» на клавиатуре вашего ноутбука, чтобы создать новый фрейм (в Figma артборды называются фреймами).
  5. Выберете артборд «Google Pixel 2 XL» или создайте артборд с такими размерами: W = 411 px / H = 823 px. Первый фрейм мы назовем «Photos».
Урок по созданию анимации в Figma, используя плагин Figmotion
Хотите кофе?
  1. Нам нужно установить плагин под названием Figmotion и импортировать шрифты Google Sans (или Product Sans или Montserrat). Чтобы установить плагины, нажмите на гамбургер-меню в верхней части экрана и выберите опцию «Plugins». Затем выберите опцию «Manage Plugins», найдите плагин «Figmotion» и установите его.
Урок по созданию анимации в Figma, используя плагин Figmotion
Это потрясающий плагин! Возможно, Adobe XD должен поучиться у Figma и добавить временную шкалу в функцию «Auto Animate»

7. Отлично! Все готово. Теперь давайте вернемся к нашему артборду (извините, фрейму). Я хочу вам кое-что сказать, если вы не используете Android-девайсы:

У вас не всегда будет доступ к различным инструментам и устройствам, и иногда вам следует создавать дизайн для того, что вы никогда раньше не использовали (вам помогут Youtube и Google). Не допустите, чтобы что-то помешало вам формировать будущее дизайна!

Поскольку вы мне нравитесь, вы можете скачать Google Фото UI kit по ссылке ниже:

Элементы: Скачайте необходимые элементы

UI Kit: Скачайте Google Фото UI kit

В указанных выше файлах вы найдете элементы интерфейса Google Фото. Я настоятельно рекомендую вам не загружать UI Kit, пока вы не прочтете всю статью, а для этой статьи нам нужен только первый файл (необходимые элементы).

В этой статье не описано, как спроектировать в Figma компонент или дизайн-систему. Я знаю лучшие способы создания компонентов, но для простоты мы используем данные компоненты только в качестве необходимых элементов для воссоздания Google Фото.

8. Скопируйте и вставьте необходимые элементы в ваше рабочее пространство (файл, который вы создали ранее). Теперь вы должны увидеть что-то вроде этого:

Урок по созданию анимации в Figma, используя плагин Figmotion
Назовем первый артборд «Photos»

Нам не нужно больше двух артбордов, чтобы отдельно показать выпадающее меню (Dropdown menu) и боковую панель (Navigation Drawer). Итак, начнем с этих простых анимаций. Прежде чем начать, я хочу рассказать вам кое-что о Figmotion.

Figmotion работает как After Effects, и если вы хотите сделать анимацию, вам не нужно создавать разные артборды, потому что этот плагин не может соединять различные артборды и обнаруживать изменения, которые были применены к элементам артбордов.

Что такое состояния?

Представьте, что вы покупаете одежду в торговом центре «А»; Через полчаса вы идете в торговый центр «Б», чтобы купить что-нибудь еще. Когда вы покинули торговый центр «А» и пошли в торговый центр «Б», ваше местоположение на карте изменилось, но вы не изменились (я имею в виду, что вы все тот же человек).

Мы используем эту философию для создания анимации. Когда вы нажимаете на прямоугольник «А», и этот прямоугольник перемещается, вы не видите два разных прямоугольника. Вы просто видите, как изменяется положение прямоугольника на экране. Иногда мы меняем другие атрибуты элемента, такие как его непрозрачность, цвет и т.д., но мы не меняем сам элемент, мы просто изменяем его атрибуты.

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы все еще видим квадрат, изменился только внешний вид этого квадрата. Представьте, что квадрат «переоделся»

Первая анимация: Появление боковой панели

Поскольку мы хотим сделать этот прототип более реальным, мы воссоздадим эффект клика. Я имею в виду, что вы нажимаете на гамбургер-меню, и появляется боковая панель.

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы хотим воссоздать эту анимацию

Прочтите приведенные ниже шаги, чтобы воссоздать страницу «Photos», а также анимацию появления боковой панели:

  1. Создайте новый артборд и назовите его «Photos». Посмотрите gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№1
  1. Теперь нам нужно добавить элементы, необходимые для боковой панели. Мы добавляем Navigation Drawer из раздела «Assets», а затем создаем черный прямоугольник, чтобы скрыть элементы позади Navigation Drawer (измените непрозрачность черного прямоугольника со 100% до 50%):
Урок по созданию анимации в Figma, используя плагин Figmotion
№2
  1. Откройте плагин Figmotion. Мы создадим 3 состояния: 0 миллисекунд (A), 300 миллисекунд (B), 700 миллисекунд (C). Мы установим непрозрачность черного прямоугольника для состояний A и B равной 0, а для состояния C зададим непрозрачность 0,5 (означает 50%):
Урок по созданию анимации в Figma, используя плагин Figmotion
№3 Мы изменили непрозрачность черного прямоугольника с 0 на 0,5 для третьего состояния. Таким образом, черный прямоугольник появляется, когда боковая панель начинает двигаться
  1. Теперь мы хотим показать боковую панель. Она отображается с левой стороны экрана. Поэтому нам нужно изменить ее положение по оси X с (-410) для состояний A и B на (0) для состояния C:
Урок по созданию анимации в Figma, используя плагин Figmotion
№4
  1. Внимательно прочитайте этот шаг, потому что мы будем использовать его дальше, чтобы воссоздать поведение при нажатии.
  • Нам нужно создать круг (Размер: 45px * 45px / Цвет: C4C4C4 / Непрозрачность: 50% / Эффект: Drop Shadow).
  • В отличие от других элементов, мы будем использовать для этого круга четыре состояния: 0 мс (A), 250 мс (B), 300 мс (C) и 350 мс (D).
    700 мс (E) будет использоваться, чтобы показать изменения, которые были применены к непрозрачности круга.
  • Нам нужно изменить его координаты по осям X и Y (чтобы показать пользователям, что круг движется):
    A: X=322 / Y=138
    B: X=27 / Y= 250
    C: X=27 / Y= 250
    D: X=27 Y= 250
  • Теперь нам нужно уменьшить его размер, при нажатии на гамбургер-меню:
    A: Ширина= 45 / Высота= 45
    B: Ширина= 45 / Высота= 45
    C: Ширина= 35 / Высота= 35
    D: Ширина= 45 / Высота= 45
  • В качестве последнего изменения, мы скроем круг после нажатия на гамбургер-меню:
    A: Непрозрачность = 0.5 (и B)
    C: Непрозрачность = 0.5 ( и D)
    E: A: Непрозрачность = 0
Урок по созданию анимации в Figma, используя плагин Figmotion
№5 Изменения, которые нужно применить к кругу, чтобы имитировать поведение нажатия

Хорошая работа! Результат будет выглядеть примерно так:

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы могли бы улучшить текущую форму анимации кликов или тайминг и даже плавность. Обещаю, в моей следующей статье вы узнаете, как это сделать 🙂

Вторая анимация: появление выпадающего меню

Теперь мы воссоздадим внешний вид выпадающего меню.

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы собираемся воссоздать эту анимацию

Просто примите к сведению! Мы используем тень для элементов, чтобы показать пользователям  какой  элемент находится ниже.

Урок по созданию анимации в Figma, используя плагин Figmotion
Какой из них ближе к экрану? (Совет: чтобы узнать, какой элемент расположен поверх другого, посмотрите на их тени)

Чтобы воссоздать анимацию появления выпадающего меню, нам снова нужно создать артборд и использовать необходимые элементы. Выполните следующие шаги, чтобы воссоздать страницу «Photos», а также анимацию появления выпадающего меню:

  1. Создайте новый артборд и назовите его «Photos». Посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№1
  1. Теперь нам нужно добавить необходимые элементы для выпадающего меню. Мы добавляем компонент «More» из раздела «Assets», а затем отключаем его, потому что хотим применить изменения к иконкам и форме выпадающего меню по отдельности.

Нам нужно изменить положение иконок выпадающего меню, а также ширину и высоту его формы, чтобы воссоздать вторую анимацию:

Урок по созданию анимации в Figma, используя плагин Figmotion
№2
  1. Преобразуйте группу «Icons» в компонент, потому что Figmotion не поддерживает группы:
Урок по созданию анимации в Figma, используя плагин Figmotion
№3
  1. Откройте плагин Figmotion. Мы собираемся создать 3 состояния: 0 мс (A), 300 мс (B), 700 мс (C). Сначала мы изменим положение компонента «Icons» по осям X и Y:
  • Нам нужно изменить положение X и Y (чтобы показать пользователям, что этот компонент перемещается):
    A: X=210 / Y=69
    B: X=210 / Y= 69
    C: X=190 / Y= 82
  • Также нам нужно изменить его непрозрачность, потому что иконки не видны в состояниях A и B:
    A: Непрозрачность = 0
    B: Непрозрачность = 0
    C: Непрозрачность = 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№4
  1. Теперь нам нужно поработать над формой выпадающего меню и изменить его позицию X, а также ширину и высоту. Также нам нужно изменить непрозрачность формы выпадающего меню, поскольку оно не отображается в состояниях A и B:
  • Нам нужно изменить ширину и высоту слоя «Shape»:
    A: Ширина= 180 / Высота= 318
    B: Ширина= 180 / Высота= 318
    C: Ширина= 219 / Высота= 387
  • Кроме того, нам нужно изменить положение X слоя «Shape» (мы меняем его, потому что мы хотим, чтобы правая сторона осталась неизменной)
    A: X= 217
    B: X= 217
    C: X= 178
  • В качестве последнего изменения, мы поменяем непрозрачность слоя «Shape»:
    A: Непрозрачность= 0
    B: Непрозрачность= 0
    C: Непрозрачность= 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№5
  1. В качестве упражнения воссоздайте поведение при нажатии на кнопку «More» (я уже объяснил последовательность действий выше).

Полученный результат должен выглядеть примерно так:

Урок по созданию анимации в Figma, используя плагин Figmotion
Я уменьшил скорость gif-файла, чтобы было лучше видно, как работает эта анимация (мы изменили ширину и высоту прямоугольника выпадающего меню и его позицию X. Также мы изменили положение X и Y иконок выпадающего меню)

Третья анимация: изображение

В качестве третьей анимации мы собираемся воссоздать анимацию появления изображения при нажатии на него. Посмотрите на рисунок ниже, чтобы лучше понять, что я имею в виду:

Урок по созданию анимации в Figma, используя плагин Figmotion
Мы собираемся воссоздать это

Если вы прилежный ученик, вы можете заметить, что в первом состоянии (перед тем, как мы нажмем на изображение), это изображение маскируется квадратом, а затем квадрат становится прямоугольником, чтобы показать всю картинку.

  1. Создайте новый артборд, назовите его «Images» и посмотрите на gif-файл ниже, чтобы добавить необходимые элементы для воссоздания страницы «Photos»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№1
  1. Теперь нам нужно добавить элементы «Image Actions» и «Image Options», когда мы хотим полностью показать изображение:
Урок по созданию анимации в Figma, используя плагин Figmotion
№2 Добавление обязательных элементов
  1. Поскольку мы собираемся изменить каждый слой элементов «Image Actions» и «Image Options», отсоедините эти компоненты и переименуйте слои. Удалите слой прямоугольника из этих элементов, потому что он нам не нужен, а также удалите иконку «More» из элемента «Image Actions».
Урок по созданию анимации в Figma, используя плагин Figmotion
№3
  1. Теперь давайте изменим положение иконок «Back», «Up» и «Fav»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№4
  1. Также нам нужно отсоединить элемент «Search Bar», потому что нам нужна иконка «More». Как вы можете заметить, нам нужно изменить цвет иконки «More» с серого на белый, когда пользователи нажимают на изображение.
Урок по созданию анимации в Figma, используя плагин Figmotion
№5
  1. Мы также должны отсоединить «Navigation Bar» и «Status bar», потому что позже хотим изменить цвет их иконок. Не забудьте переименовать слои, чтобы их было проще найти в Figmotion:
Урок по созданию анимации в Figma, используя плагин Figmotion
№6
  1. Наконец, мы также должны отсоединить элемент «Images», потому что первое изображение будет использовано позже для завершения этой анимации. Когда вы отключите этот элемент, вы увидите две группы: «August» и «July». Снова преобразуйте группу «July» в компонент, в противном случае ее элементы не будут видны в Figmotion:
Урок по созданию анимации в Figma, используя плагин Figmotion
№7
  1. Добавьте черный прямоугольник, который будет отображаться при нажатии на изображение. Установите его непрозрачность на «0%:
Урок по созданию анимации в Figma, используя плагин Figmotion
№8
  1. Теперь мы готовы открыть плагин Figmotion и воссоздать третью анимацию. Мы будем использовать три состояния для этих элементов:
  • Image: 0 мс (A), 300 мс (B) и 700 мс (C )
  • Status bar, Navigation bar, иконка «More», черный прямоугольник, Image actions и Image options: 0 мс (A), 300 мс (B), 500 мс (C )

Почему? Потому что эти элементы будут изменены, прежде чем изображение откроется полностью.

Урок по созданию анимации в Figma, используя плагин Figmotion
№9 Это изображение бесполезно
  1. Теперь давайте откроем плагин Figmotion и изменим поведение «Image».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Размер:
    A :Ширина= 99 / Высота= 99
    B: Ширина= 99 / Высота= 99
    C: Ширина= 411 / Высота= 327
  • Позиция:
    A: Y= 163
    B: Y= 163
    C: Y= 248
Урок по созданию анимации в Figma, используя плагин Figmotion
№10
  1. Теперь мы должны изменить поведение черного прямоугольника, который мы создали ранее:

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • A: Непрозрачность= 0
    B: Непрозрачность= 0
    C: Непрозрачность= 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№11
  1. На этом этапе мы собираемся изменить поведение элементов компонента «Image Actions»: «Back», «Favourite» и «Upload».

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • A: Непрозрачность= 0
    B: Непрозрачность= 0
    C: Непрозрачность= 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№12
  1. Теперь мы хотим изменить поведение элементов «Navigation Bar», а также иконки «More».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Navigation Bar / Back
    A: Stroke Color = 0
    B: Stroke Color = 0
    C: Stroke Color = 1
  • Navigation Bar / Home
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Иконка «More»
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№13
  1. В качестве последнего шага мы изменим цвет иконок строки состояния:

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Status Bar / Time
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Charge Percent
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / LTE
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Network
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Status Bar / Battery / Charge (это иконка)
    A: Fill Color = 0
    B: Fill Color = 0
    C: Fill Color = 1
  • Не меняйте Status Bar / Battery / Shape!
Урок по созданию анимации в Figma, используя плагин Figmotion
№14
  1. Мы кое-что забыли! Что? Нам нужно изменить непрозрачность иконок «Image Options».

Напомню, что их состояния: 0 мс (A), 300 мс (B) и 500 мс (C)

  • Image Options / 1
    A: Непрозрачность = 0
    B: Непрозрачность = 0
    C: Непрозрачность = 1
  • Image Options / 2
    A: Непрозрачность = 0
    B: Непрозрачность = 0
    C: Непрозрачность = 1
  • Image Options / 3
    A: Непрозрачность = 0
    B: Непрозрачность = 0
    C: Непрозрачность = 1
  • Image Options / 4
    A: Непрозрачность = 0
    B: Непрозрачность = 0
    C: Непрозрачность = 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№15 Я применил эти изменения к одной иконке, но вы должны сделать это и для других иконок Image Options
  1. Упражнение: Воссоздать поведение нажатия.

Отлично! Я ожидаю, что вы создали что-то вроде этого или даже лучше. Как вы можете заметить, мышь ведет себя не очень, но это не имеет большого значения! Давайте посмотрим на gif-файл ниже:

Урок по созданию анимации в Figma, используя плагин Figmotion
🙂

Четвертая анимация: переключение между вкладками

Настало время самой сложной анимации! Давайте сначала посмотрим на анимацию ниже:

Урок по созданию анимации в Figma, используя плагин Figmotion
На первый взгляд, все выглядит очень просто, но заметили ли вы, как меняются иконки?

Позвольте мне объяснить, что мы собираемся сделать:

  • Изменить радиус краев прямоугольника, чтобы показать пользователям, что выбрана вкладка «Albums».
  • Изменить стиль иконки «Photos», поэтому я воссоздам эту иконку.
  • Изменить стиль иконки «Albums», поэтому я воссоздам эту иконку.
  • Показать содержимое вкладки «Albums»
  1. Давайте воссоздадим это вместе, создав новый артборд и добавив необходимые элементы:
Урок по созданию анимации в Figma, используя плагин Figmotion
№1
  1. Поскольку нам нужно показать вкладку «Albums», необходимо добавить компонент «Albums»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№2
  1. Расположите слои, как на картинке ниже:
Урок по созданию анимации в Figma, используя плагин Figmotion
№3
  1. Отсоедините элемент «Bottom Bar» и создайте отдельную группу для каждой иконки:
Урок по созданию анимации в Figma, используя плагин Figmotion
№4
  1. Теперь нам нужно воссоздать иконку вкладки «Photos»:
Урок по созданию анимации в Figma, используя плагин Figmotion
№5 Не бойтесь создать новую иконку или воссоздать то, что уже создано!
  1. Мы должны изменить название слоев вкладки «Photos», как показано ниже:
  • Mountain → Photos / Mountain
  • Square → Photos / Shape
  • Также сделайте копию слоя «Photos / Shape» и измените его имя на: «Photos / Shape / Back».
    Нам нужно применить следующие изменения к этому слою: удалить «Fill», добавить внутреннюю границу (Inside Border / Размер: 2 / Цвет: #767676). Он должен быть ниже, чем слой «Photos / Shape».

Почему мы сделали копию слоя «Photos / Shape»? Мы узнаем это, когда он исчезнет.

Урок по созданию анимации в Figma, используя плагин Figmotion
№6
  1. Воссоздание «Albums» будет довольно сложным, но, как я уже говорил, не бойтесь этого! Мы попытаемся создать иконку книги.
  • Первый шаг: создайте квадрат и попробуйте разместить его на квадрате основной иконки.
  • Второй шаг: создайте вектор, подобный тому, как на gif-файл ниже, и измените радиус его основного угла на 2.
Урок по созданию анимации в Figma, используя плагин Figmotion
№7–1 и 2
  • Третий шаг: измените цвет обводки квадрата на # 767676 (Удалите опцию «Fill» / размер обводки = 2) и измените векторную обводку на #767676.
Урок по созданию анимации в Figma, используя плагин Figmotion
№7–3
  • Четвертый шаг: создайте еще один вектор, как на gif-файле ниже, и залейте его следующим цветом: # 767676.
Урок по созданию анимации в Figma, используя плагин Figmotion
№7–4
  • Пятый шаг: переименуйте квадрат и векторы:
    Square → Albums / Shape
    First vector → Albums / Line
    Second vector → Albums / Complete

Шестой шаг: сделайте копию «Albums / Shape», удалите опцию «Stroke» и отметьте опцию «Fill». Залейте фигуру этим цветом: #1D6DDF и установите его непрозрачность по умолчанию 0%.

Также измените его имя на «Albums / Shape / Back» (когда «Albums / Shape» исчезнут, мы покажем его):

Урок по созданию анимации в Figma, используя плагин Figmotion
№7– 5 и 6
  • Седьмой шаг: измените порядок «Albums / Shape», «Albums / Line», «Albums / Shape/ Back» и «Albums / Complete», как показано на рисунке ниже:
Урок по созданию анимации в Figma, используя плагин Figmotion
№7–7
  1. Создайте новый прямоугольник (взгляните на основную анимацию, чтобы понять, почему мы хотим добавить прямоугольник на нижнюю панель!) И измените его имя на «Rectangle / Tap». Его положение в окне «Layers» должно быть ниже, чем иконки, которые мы создали ранее, и их метки:
  • Заливка: #1D6DDF
    Непрозрачночть: #10
    Радиус: 40
Урок по созданию анимации в Figma, используя плагин Figmotion
№8
  1. Откройте Figmotion и давайте воссоздадим последнее микровзаимодействие. Нам нужно использовать три состояния:
  • Элемент «Albums»: 0 мс (A), 700 мс (B), 900 мс (C)
  • Другие элементы и слои: 0 мс (A), 300 мс (B), 700 мс (C)

Почему? Потому что элемент «Albums» появляется после того, как пользователь нажал на вкладку «Albums», а элемент «Images» исчез.

Сначала мы воссоздадим анимацию исчезновения элемента «Images»:

Напоминаю, его состояния составляют: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Компонент «Images»:
    Состояние A: Непрозрачность = 0
    Состояние B: Непрозрачность = 0
    Состояние C: Непрозрачность = 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№9
  1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Photos»:

Напомню, что его состояния равны 0 мс (A), 300 мс (B) и 700 мс (C)

  • Photos / Shape: мы изменим его непрозрачность со 100% до 0%.
    Состояние A: Непрозрачность = 1
    Состояние B: Непрозрачность = 1
    Состояние C: Непрозрачность = 0
  • Photos / Mountain: нам нужно изменить цвет с #FFFFFF на #272727.
    Состояние A: Цвет заливки= #FFFFFF
    Состояние B: Цвет заливки = #FFFFFF
    Состояние C: Цвет заливки = #272727
  • Photos (Text): нам нужно изменить его цвет с #1D6DDF на #272727.
    Состояние A: Цвет заливки = #1D6DDF
    Состояние B: Цвет заливки = #1D6DDF
    Состояние C: Цвет заливки = #272727
  • Не изменяйте непрозрачность «Photos / Shape / Back», его непрозрачность всегда должна быть 1.
Урок по созданию анимации в Figma, используя плагин Figmotion
№10
  1. Теперь мы хотим воссоздать эффект нажатия (я имею в виду, что мы покажем последний прямоугольник, который мы создали для имитации эффекта нажатия):

Его состояния: 0 мс (A), 300 мс (B), 700 мс (C) и 900 мс (D).

  • Прямоугольник / Tap: мы собираемся изменить радиус его непрозрачности с 0% до 10% (состояние B -> состояние C), а затем изменим его на 0%, чтобы скрыть этот прямоугольник (состояние C -> состояние D).
    Состояние A: Непрозрачность = 0
    Состояние B: Непрозрачность = 0
    Состояние C: Непрозрачность = 0.10
    Состояние D: Непрозрачность = 0
  • Прямоугольник / Tap: также мы должны изменить радиус его углов с 40 на 0.
    Состояние A: Border radius = 40
    Состояние B: Border radius = 40
    Состояние C: Border radius = 0

Мы не будем изменять радиус границы углов этого прямоугольника в последнем состоянии (900 мс).

Урок по созданию анимации в Figma, используя плагин Figmotion
№11
  1. На этом этапе пришло время поменять эффект изменения стиля иконки вкладки «Albums»:

Напомню, что его состояния: 0 мс (A), 300 мс (B) и 700 мс (C)

  • Albums (метка): нам нужно изменить ее цвет с #272727 на #1D6DDF
    Состояние A: Цвет заливки= #272727
    Состояние B: Цвет заливки= #272727
    Состояние C: Цвет заливки= #1D6DDF
  • Albums / Shape:
    Состояние A: Непрозрачность= 1
    Состояние B: Непрозрачность= 1
    Состояние C: Непрозрачность= 0
  • Albums / Shape / Back:
    Состояние A: Непрозрачность= 1
    Состояние B: Непрозрачность= 1
    Состояние C: Непрозрачность= 0
  • Albums / Line:
    Состояние A: Stroke Color = #272727
    Состояние B: Stroke Color = #272727
    Состояние C: Stroke Color = #1D6DDF
  • Albums / Complete:
    Состояние A: Цвет заливки = #272727
    Состояние B: Цвет заливки = #272727
    Состояние C: Цвет заливки = #FFFFFF
Урок по созданию анимации в Figma, используя плагин Figmotion
№12
  1. Это последний шаг, прежде чем я дам вам упражнение! Снова взгляните на основной gif-файл, который использовался для воссоздания его микровзаимодействия. Вы могли заметить, что компонент «Albums» перемещается немного вверх, а затем появляется. Итак, нам нужно изменить его позицию Y, а также его непрозрачность:

Напомню, что его состояния: 0 мс (A), 700 мс (B) и 900 мс (C)

  • Albums (компонент, который был добавлен на артборд на втором шаге): как я уже говорил, нам нужно изменить его позицию Y.
    Состояние A: Y= 155
    Состояние B: Y= 155
    Состояние C: Y= 140
  • Также нам нужно изменить его непрозрачность:
    Состояние A: Непрозрачность= 0
    Состояние B: Непрозрачность= 0
    Состояние C: Непрозрачность= 1
Урок по созданию анимации в Figma, используя плагин Figmotion
№13
  1. В качестве упражнения создайте круг и смоделируйте поведение нажатия (я имею в виду создайте круг, переместите его, а затем измените его размер, чтобы имитировать поведение нажатия).

Теперь мы создали эту анимацию:

Урок по созданию анимации в Figma, используя плагин Figmotion
Хорошая работа! 🙂

Вы узнали, как создавать наиболее полезные микровзаимодействия ОС Android. Я надеюсь, что в качестве упражнения вы воссоздадите еще больше микровзаимодействий приложения Google Фото, чтобы лучше усвоить эту статью.

Если вы узнали что-то новое и считаете статью полезной, ставьте лайк, и поделитесь ею с коллегами. 🙂

Аккаунт автора статьи на Dribbble: https://dribbble.com/Em-designer

Портфолио автора: https://mojahanii.wixsite.com/jahanii

Оригинал: Em Design

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Руководство по работе с изображениями в Figma

Не секрет, что изображения являются огромной частью мира дизайнера. От поиска и…

Лучшие практики Figma: компоненты, стили и общие библиотеки

Две самые мощные функций Figma – это компоненты и стили. Они позволяют вам повторно…

Figma оверлеи – переход протипирования на новый уровень

Благодаря новой функции наложения (оверлеев) в Figma вы теперь можете гибко отображать один контент поверх другого, взаимодействовать с ним и даже открывать несколько наложений.