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

Как делать прототипы в 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 сама достраивает промежуточные кадры.

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

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

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

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

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

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

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

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

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

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

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

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

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

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать

Курс

Figma с нуля до PRO

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

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

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

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