Как сделать анимацию в Фигме – простая инструкция

Нет комментариев

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

Зачем нужна анимация в дизайне

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

В маркетинге анимация может влиять на конверсию: по данным Marketing Sherpa, компания Dell провела email-кампанию с использованием gif-анимаций и добилась конверсии на 109% больше обычного – более чем в два раза. Звучит круто! Но как сделать анимацию?

Инструменты для создания анимации в Фигме

В Фигме есть несколько способов создания анимации. Будем идти от простого к сложному.

Анимации в прототипировании

Прототипирование — это создание схематичного макета сайта или приложения. В Фигме его можно сделать интерактивным: создать несколько последовательных экранов и соединить их, задав анимации перехода.

Создадим новый фрейм. Для знакомства с инструментами не обязательно рисовать полноценный интерфейс, достаточно любой фигуры. Нарисуем на нем прямоугольник или, как он обозначается в Фигме, Rectangle. Затем продублируем фрейм и уменьшим размеры нашей фигуры.

Анимация в Фигме – простое руководство

Выделим первый созданный Rectangle и перейдем во вкладку Prototype — она расположена в меню справа. В графе Interaction нажмем кнопку с плюсиком — так мы создадим новые взаимодействия с фигурой.

Анимация в Фигме – простое руководство

В поле Interactions у нас появится цепочка взаимодействия в виде «Click -> None». Если перевести с английского, то это означает, что при клике на выбранный объект ничего происходить не будет. Кликнем на это поле, затем на первый пункт On click и в выпадающем списке подробнее рассмотрим варианты действий.

Анимация в Фигме – простое руководство

В этом списке мы должны выбрать, в каком случае будет происходить действие:

  • On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).
  • On drug — при перетаскивании.
  • While hovering — при наведении.
  • While pressing — при удержании клика.
  • Key/gamepad — при нажатии на горячую клавишу.
  • Mouse enter — при появлении курсора в области объекта.
  • Mouse leave — при покидании объекта курсором.
  • Mouse down — в начале клика.
  • Mouse up — в конце клика.

Для примера оставим On click.

Далее выберем, что будет происходить после совершения выбранного нами события. Для этого нажимаем на список, где написано None, и открываем тем самым список вариантов:

Анимация в Фигме – простое руководство

  • None — ничего не происходит.
  • Navigate to — перейти к (другому объекту/фрейму).
  • Open overlay — наложить поверх текущего фрейма.
  • Scroll to — пролистать до другого объекта в рамках одного фрейма.
  • Swap overlay — заменить один фрейм другим.
  • Back — перейти назад.
  • Close overlay — закрыть объект, наложенный поверх фрейма с помощью Open Overlay.
  • Open link — перейти по ссылке.

Чтобы наш большой Rectangle из первого фрейма превратился в маленький из второго, укажем в данном меню пункт Navigate to. Поскольку у нас всего два фрейма, Фигма проставляет его автоматом. Если фреймов больше, тогда нужно выбрать его из списка рядом с Navigate to или кликнуть на кружочек на боковой стенке объекта, после чего перетащить появившуюся синюю стрелочку к нужному фрейму.

Анимация в Фигме – простое руководство

Таким образом мы указали, что при клике на квадрат необходимо переходить на фрейм с маленьким квадратом.

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

Пример стрелок взаимодействий на прототипах экранов приложения

Ниже в меню мы видим заголовок Animation, где мы как раз можем выбрать, каким образом будет происходить переход:

Анимация в Фигме – простое руководство

  • Instant — мгновенно.
  • Dissolve — растворение.
  • Smart animate — умная анимация (о ней поговорим ниже).
  • Move in — перемещение внутрь.
  • Move out — перемещение наружу.
  • Push — смахивание.
  • Slide in / Slide out — перемещение с растворением.

У всех переходов, кроме Instant, можно выбрать степень плавности, с которой он будет происходить, а также продолжительность. Эти настройки находятся ниже выбора типа самого перехода.

Анимация в Фигме – простое руководство

  • Linear — линейно (плавно).
  • Ease in — анимация начнется медленно и будет ускоряться к концу.
  • Ease out — анимация начнется быстро и будет замедляться к концу.
  • Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится.
  • Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется.
  • Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки.
  • Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки.
  • Custom — пользовательский вариант, позволяет вручную установить и настроить плавность.

Попробуем в нашем примере поставить переход Dissolve и плавность Ease in.

Таким образом мы задали анимацию изменения квадрата при клике на него. Запустим ее с помощью кнопки Present в верхнем меню справа или нажав на синюю стрелочку Flow 1 рядом с фреймом.

Анимация в Фигме – простое руководство
Анимация в Фигме – простое руководство

Так можно создавать интерактивные дизайны, чтобы заказчик не просто смотрел на них, но и взаимодействовал с элементами.

Анимация в Фигме – простое руководство

Умная анимация (Smart animate)

Smart animate — это один из типов переходов в Фигме, который самостоятельно анимирует схожие объекты. При этом Фигма учитывает имена объектов и их место в иерархии, распознает различия и только затем применяет переход для анимации между ними.

Продолжим работать с нашими квадратами и применим Smart animate. Для разнообразия сделаем второй квадрат зеленым и повернем его на 45 градусов. Затем зададим взаимодействие между квадратами и установим переход Smart animate.

Анимация в Фигме – простое руководство

Анимация в Фигме – простое руководство

Затем запустим нашу анимацию. Как видите, мы не делали никаких дополнительных настроек, но Фигма сама определила отличия двух фреймов и создала между ними «умный» переход.

Анимация в Фигме – простое руководство

Примеры простых анимаций

Изменение кнопки при наведении

Создадим новый фрейм и поместим внутри него кнопку. Для этого формируем Rectangle, добавляем текст и выбираем необходимый цвет — например, фиолетово-розовый градиент. Продублируем этот фрейм и поменяем цвет. В данном случае просто сделаем градиент темнее. Также можно немного увеличить текст.

Анимация в Фигме – простое руководство

Выделяем Rectangle у красной кнопки и идем во вкладку Prototype в верхнем правом меню. В качестве действия выбираем While hovering («при наведении»), а в качестве события — Open overlay, чтобы один фрейм перекрывался другим. В качестве перекрывающего фрейма выбираем нашу продублированную темную кнопку.

В блоке Animation выбираем Dissolve и Easy out, чтобы анимация получилась плавной. Теперь смотрим, что получилось:

Анимация в Фигме – простое руководство

Перетаскивание ползунка

Сделаем ползунок, при перетаскивании которого изменяется высота столбцов под ним. Техника его создания не отличается от той. которая была описана в предыдущем примере. Отличается только способ самой анимации.

Создаем элементы дизайна: с помощью Rectangle – столбцы и сам ползунок с закругленными краями. Эллипсом делаем круг, который будем перетягивать на другую сторону.

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

Анимация в Фигме – простое руководство

Выделяем кружочек ползунка и переходим в Prototype. В качестве действия выбираем On drug («при перетаскивании»), а в качестве события — Navigate to. Затем выбираем наш второй фрейм. Тип анимации ставим Smart animate.

Дублируем эти же настройки для нашего второго фрейма, только там в качестве события Navigate to будет первый фрейм. И смотрим, что получилось:

Анимация в Фигме – простое руководство

Выпадающее меню

Создадим два фрейма: первый экран и меню, которое будет открываться кликом на иконку с «бургером».

Анимация в Фигме – простое руководство

Выделяем нашу иконку «бургера» и переходим в Prototype. В качестве действия выбираем On click («при клике»), а в качестве события — Open overlay, поскольку нам необходимо разместить меню поверх экрана. Целевой фрейм — наше меню.

В блоке Overlay настраиваем, откуда меню будет начинаться. В данном случае выбираем Top center — центр верха. Также здесь нам предлагается добавить две настройки — «Закрыть при клике в свободную область» (Close when clicking outside) и определить фон за всплывающим окном (Add background behind overlay). Тип анимации выбираем Move in и справа выбираем стрелочку, с какой стороны будет появляться меню. В нашем случае – сверху вниз.

Анимация в Фигме – простое руководство

Для того, чтобы можно было закрыть меню, кликнув по кнопке «Закрыть», выделим этот текст и добавим ему взаимодействие. Выбираем, что при клике будет закрываться заданный нами ранее Overlay.

Анимация в Фигме – простое руководство

Переходим в режим презентации и смотрим работу нашего «бургер-меню».

Анимация в Фигме – простое руководство

Как мы видим, благодаря двум настройкам в Overlay, при появлении меню фон затемняется, а закрыть его можно не только с помощью кнопки «Закрыть», но и просто кликнув в свободную область.

Итоги

Мы рассмотрели инструменты Фигмы, позволяющие создавать анимации и интерактивные интерфейсы. Надеюсь, что статья поможет вам увеличить «скилл» в дизайне и откроет новые возможности использования Фигмы.

##READMORE_BLOCK_96066##

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

More from our blog

See all posts

Оставить комментарий