Дизайн
#Руководства

Как делать прототипы в Figma: анимация

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

tesla / youtube

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

Благодаря встроенным функциям Figma, вы можете сами собрать любую анимацию в своём макете и сразу показать идею, а не объяснять всё «на пальцах».

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

Это руководство по продвинутой работе с прототипами в Figma. Если вы о них слышите в первый раз, советуем прочитать нашу статью об основах работы с ними.

9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с анимацией, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.

Режимы анимации

В Figma есть набор стандартных переходов, которые в прототипе помогают плавно менять один экран на другой. Всего их девять, но пользоваться вы будете, скорее всего, только пятью из них:

1. Instant — анимации нет вообще, экраны сменяют друг друга моментально.

2. Linear — линейная, вся анимация протекает с одной скоростью:

Изображение: Skillbox Media

3. Ease-in — анимация медленно начинается, к концу ускоряется:

Изображение: Skillbox Media

4. Ease-out — анимация начинается быстро, к концу замедляется:

Изображение: Skillbox Media

5. Ease-in-out — старт и конец анимации замедлены:

Изображение: Skillbox Media

Вы можете пользоваться только переходами, но для полноценной анимации этого недостаточно. Чтобы делать красивые всплывающие окна и изменения в кнопках, воспользуйтесь ещё одной функцией Figma — умной анимацией.

Умная анимация

В этом режиме можно делать более сложные переходы — увеличивать и уменьшать объекты, двигать их, добавлять новые. Исходя из пользовательских настроек и организации слоёв внутри фреймов, Figma сама понимает, как именно должна проходить анимация.

Общий принцип создания анимации: первый макет — начальная точка, а второй — конечная. Между ними Figma сама достраивает промежуточные кадры.

Для примера, попробуйте заставить один модуль исчезнуть, а остальные — подтянуться на его место:

  • Создайте любой макет и добавьте на него сверху модуль, который должен пропасть по клику.
  • Скопируйте его и перенастройте исчезаемый модуль — сделайте его на 90% меньше и укажите непрозрачность 0%. Важно, чтобы центр модуля и его верхнее поле внутри макета не изменились, иначе анимация получится плохой.
  • Подтяните остальные, неисчезаемые модули наверх.
  • Зайдите во вкладку Prototype, наведите курсор на исчезаемый модуль первого макета, зажмите правой кнопкой мыши кружок на нём и ведите его ко второму макету.
  • В настройках анимации укажите Smart animate.
  • Нажмите кнопку и проверяйте результат.
Изображение: Skillbox Media

Следите за названиями и вложенностью слоёв внутри фреймов. Если вы хотите, чтобы объекты не просто исчезали, а красиво анимировались, на панели слоёв они должны называться и располагаться везде. Иначе Figma не поймёт, что вам нужно сделать, и в прототипе вместо анимации вы увидите просто затухание объекта.

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

Теперь попробуйте сделать анимацию удаления через свайп:

  • Возьмите макет приложения и выберите на нём любой элемент, который хотите удалить. Например, карточку со статьёй.
  • Добавьте в неё фрейм того же цвета, перекрасьте его в красный цвет. По желанию — добавьте в него текст «Удалить».
  • Выделите ваш элемент и красный фрейм, а затем сгруппируйте их, нажав Ctrl (⌘) + G.
  • Оба объекта должны стоять горизонтально. При этом красный фрейм должен быть за пределами видимой границы основного.
  • Создайте копию получившегося макета.
  • Сместите конструкцию с красным фреймом так, чтобы его было видно. Удаляемый элемент должен оказаться за пределами видимой границы основного фрейма.
  • Создайте копию второго получившегося макета, удалите на нём конструкцию с красным фреймом и выровняйте объекты под ним.
  • Перейдите во вкладку Prototype и соедините конструкции с красными фреймами с последующими копиями основных. В настройках первой анимации в качестве действия укажите On drag, а во второй — On tap. Не забудьте указать Smart animate.
  • Нажмите на кнопку и проверьте получившуюся анимацию.
Изображение: Skillbox Media

Теперь попробуйте сделать анимированное всплывающее окно:

  • Выберите любой объект на макете, по нажатию на который будет появляться всплывающее окно. Например, карточку статьи.
  • Сделайте под ним небольшой блок с текстом — это будет всплывающее окно.
  • Скопируйте получившийся макет.
  • В копии выделите всплывающее окно и с помощью инструмента Scale (K) уменьшите его примерно на 90%. Непрозрачность укажите 0%. Остальные объекты внутри макета подтяните, чтобы они стояли на месте всплывающего окна.
  • Перейдите во вкладку Prototype и выделите фрейм с карточкой статьи на макете без всплывающего окна.
  • Соедините фрейм карточки с макетом, где всплывающее окно есть.
  • Выделите фрейм карточки статьи на макете уже со всплывающим окном.
  • Соедините фрейм карточки с макетом, где всплывающего окна нет.
  • Нажмите на кнопку и проверьте получившуюся анимацию.
Изображение: Skillbox Media

Как вы уже заметили, при создании разных анимаций их суть остаётся прежней: первый макет — начальная точка, а второй — конечная. Точно так же создаются и любые другие: от анимаций кнопок до экранов загрузки. А лучший способ всё это изучить — пробовать собирать что-то самостоятельно.

Для тренировки советуем попробовать сделать следующие анимации:

  • Изменение цвета и текста кнопки после клика.
  • Экран загрузки с вертикальным прогресс-баром.
  • Превращение кнопки в экран загрузки.

Больше интересного про дизайн в нашем телеграм-канале.  Подписывайтесь!

Самоучитель по Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Научитесь: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована