Анимация интерфейсов в Фигме
В вакансиях на ui-ux-web-digital дизайнера часто встречается требование «анимация интерфейса», а начинающие дизайнеры иногда даже не подаются на такие вакансии, потому что считают, анимация интерфейса — это что-то сложное и вообще моушн-дизайн.
Некоторые дизайнеры думают, что чтобы анимировать интерфейс, придётся делать что-то такое :)
В этой статье я собрала всю важную информацию про анимацию интерфейсов с акцентом на самый простой и самый востребованный сейчас способ работы с анимацией — штатные средства Фигмы.
В статье много картинок и примеры с живым Фигма файлом. Получилось много букв, поэтому держите оглавление:
Зачем нужна анимация
Если от дизайнеров требуется этот скилл, значит он важен.
Первое, что приходит в голову — создание вау-эффекта, шоу, яркого впечатления для посетителей сайта. Ни один победитель awwwards не обходится без эффектной анимации.
Но на самом деле анимация используется практически в любом интерфейсе. Просто она не такая броская. Основные её функции:
Привлечь внимание в определенному месту на экране. Пример: баннеры и карусели с акциями на сайтах магазинов.
Дать пользователю обратную связь о происходящем в интерфейсе. Пример: прелоадер, который сообщает, что процесс идёт, надо только подождать.
Показать структуру, возможность взаимодействия, жесты. Пример: плавный скролл от якорной ссылки до нужного места на экране показывает, что мы всё ещё остаемся на странице, просто сместились чуть ниже. Выплывающее сбоку меню показывает, как можно вызвать его жестом. А увеличивающиеся по наведению иконки говорят о том, что это кнопки и их можно нажать.
Бывает ли плохая анимация?
С чем угодно можно переборщить, анимация — не исключение. Если на сайте всё постоянно движется, подскакивает, плавает и живёт своей жизнью, пользователь очень быстро устанет от этого мельтешения.
Анимация должна быть согласованной. Если в одной части приложения меню плавно выезжает справа налево с затенением, а в другой части другое меню резко выпрыгивает и пружинит — это плохо.
Если анимация получилась сложной, ресурсоёмкой, если из-за неё всё тормозит и вылезают ошибки, её нужно упрощать. Плохо работающее приложение не спасут никакие спецэффекты.
Какие инструменты использовать
Способов создания анимированных интерфейсов много. Рассмотрим основные.
Конструкторы сайтов типа Тильды и Редимага предлагают даже в стандартных блоках довольно неплохую базовую анимацию, а если поработать с настройками, можно сделать сложные спецэффекты.
Можно создавать анимацию с помощью кода. Просто берёте и пишете html, css, js 😂 Если серьёзно, даже если вы совсем не программист, можно брать понравившуюся анимацию, например, с codepen.io и изменять под свои нужды. Для этого достаточно базовых знаний css и понимания работы javascript (он, кстати, не всегда нужен, на чистом css можно анимировать довольно интересные штуки).
Сложная красивая анимация в кейсах на dribbble и behance с большой вероятностью сделана в After Effects и существует только для красоты портфолио. Есть способы переносить анимацию из After Effects, но они сложные, дорогие и ненадежные, поэтому в реальной разработке лучше обойтись без таких спецэффектов, по крайней мере, пока вы на 200% не уверены в обратном.
Principle, Framer, Invision, Ptoropie, Marvel и все их аналоги. Про каждую можно смело писать серию статей, но даже если вы ни одной из них не знаете, это не помешает вам включить анимацию интерфейса в скиллы в резюме.
Фигма. Собственно, о ней и говорим дальше.
Анимация в Фигме
Прежде чем переходить к основной части, не могу не упомянуть плагин Figmotion (страничка плагина). В отличии от самой Фигмы, в плагине для работы с анимацией есть временная шкала, на которой размещают ключевые кадры — то есть кадры, в которых состояние объекта изменяется.
Плагин довольно интересный, но советую переходить к его использованию, когда штатных средств Фигмы станет недостаточно для вашей задумки :)
Штатные средства Фигмы
Анимации, сделанные в Фигме — это необходимый и достаточный минимум для дизайнера интерфейсов, для большинства рабочих проектов можно будет обойтись только ей.
1. Общая информация
Анимации в Фигме доступны для прототипов: они настраиваются на вкладке Prototype и просмотреть их можно только в режиме просмотра прототипа (треугольник справа сверху рядом с кнопкой Share).
Анимация в Фигме работает так: есть два фрейма, мы делаем переход из одного в другой. Вот этот переход мы можем анимировать.
Можно анимировать фреймы внутри фрейма, компоненты и варианты компонентов.
2. Параметры анимации
Панель настройки интерактива очень маленькая, не запутаться. В ней всего 3 раздела: триггеры, события, настройки анимации.
Триггеры
Триггер — это событие, которое запускает анимацию. По умолчанию стоит onClick, то есть когда мы нажимаем мышкой на первый элемент — запускается анимация и появляется второй.
В этой анимации триггер — нажатие мышкой на зелёном поле.
Каждый триггер описывать не буду, они максимально соответствуют своим названиям. Лучше просто попробовать их все самостоятельно и посмотреть, что будет.
Остановлюсь на одной детали, вопрос с которой я решала в начале собственного обучения — разница между «while hovering» и «mouse enter» + «mouse leave».
Наглядной становится эта разница при проектировании выпадающих меню. Если поставить триггер while hovering, довести курсор до пунктов меню не получится. Поэтому делаем 2 отдельных события, mouse enter и mouse leave.
Действие
По умолчанию у нас стоит Navigate to — перейти к другому фрейму (объекту). Тут все просто, нажал на А, перешел к Б.
Change to позволяет переключаться между вариантами компонента (доступно, естественно, только для компонентов).
Например, у нас есть компонент чекбокса, у него два варианта — нажат или нет. Создадим прямо в компоненте анимацию, чтобы по нажатию на пустой чекбокс в нём появлялась галочка, а по нажатию на чекбокс заполненный — галочка пропадала. Для этого будем использовать Change to.
Чтобы посмотреть результат, нужно поместить на фрейм копию компонента и запустить режим просмотра прототипа.
Теперь везде в проекте, где мы будем использовать такой чекбокс, будет работать анимация, которую мы настроили.
Следующий блок действий посвящен работе с оверлеями. Они нужны для показа разных всплывашек.
Оверлей (всплывающее окно) нужно создать отдельным фреймом. Его положение относительно основного фрейма (страницы) можно настроить вручную (manual) или выбрать одно из предустановленных выравниваний.
Действие Open overlay покажет всплывающее окно на выбранном месте на странице. Change overlay по клику внутри одного всплывающего окна может открыть вместо него другое всплывающее окно (тоже должно быть отдельным фреймом). Чекбокс «Add background behind overlay» позволит создать затенение под всплывающим окном.
Последний блок — это стандартные элементы навигации: назад, скроллить и открыть ссылку (внешнюю ссылку типа http://…).
Вы можете настроить переход на один фрейм с нескольких других фреймов. И back вернет вас именно на тот фрейм, с которого вы перешли — работает как кнопка «назад» в браузере.
Настройки анимации
Instant — это когда никакой анимации нет, есть только действие по триггеру.
Анимации Dissolve (растворение) и всё, что под чертой (Move in и другие), имеют много общего. Превью каждой анимации показывает Фигма самостоятельно. Для каждой можно указать длительность в милисекундах и выбрать тип изинга (немного про изинги будет дальше).
Для Move in и прочих можно выбрать направление движения анимации.
Для Dissolve можно указать галочку Preverse scroll position — тогда фрейм, на который мы перешли, будет показан не с самого верха, а с той же позиции, где мы были на исходном фрейме:
Изинги
Когда речь идёт об анимации, нельзя не упомянуть изинги. Изинги (от англ. easing — «ослабление», «смягчение») — это настройки ускорения и замедления анимации. Настройка изингов позволяет анимировать объекты на экране так, чтобы они вели себя, как мы привыкли в жизни.
Вот какие изинги есть в Фигме:
Linear — движение будет равномерным
Ease in — анимация начнется медленно и будет ускоряться к концу
Ease out — анимация начнется быстро и будет замедляться к концу
Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится
Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется
Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки
Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки
Custom — можно настроить ускорения самостоятельно, потянув за точки на кривой
Дальше идут настройки подпружинивания (Spring, если знаете, как лучше сказать по-русски, напишите в комменты)) анимации в конце.
Все настройки изингов можно сразу увидеть на превью. А вот отличный гайд от Фигмы. Там на английском, но очень наглядные гифки.
Smart Animate
Мы просто выбираем Smart Animate и Фигма сама подбирает оптимальную анимацию! И это очень удобно.
Но при использовании Smart Animate очень важно следить, чтобы, во-первых, слои (фреймы, шейпы и т.д.), которые мы анимируем, назывались на всех фреймах одинаково. И во-вторых, чтобы имели одинаковый уровень вложенности. Иначе Фигма не поймёт, что мы от неё хотим.
А теперь к примерам
Живой файл с этими примерами тут.
Кнопки, чекбоксы, дропдаун меню
Простые компоненты, которые приходится делать чаще всего
А вот кстати человек заморочился и сделал 25 вариантов анимации кнопки по наведению, можно утащить в проект или просто посмотреть, как всё устроено
Галерея
Слайдеры можно делать по-разному. В том, что на примере, есть маленькая хитрость. Допустим, мы хотим, чтобы фотографии пролистывались справа налево, а верх и низ оставались на своих местах.
Если мы просто сделаем три слайда и настроим между ними анимацию Smart Animate, то Фигма преложит вот такую анимацию:
То есть верх и низ остаются неизменными, а фотографии трансформируются одна в другую. Так происходит, потому что Фигма на каждой фрейме ищет одинаково названные объекты и настраивает анимацию между ними. Она «видит», что объекты header и bottom повторяются, поэтому оставляет их неизменными, а slide1 превращается в slide 2.
Если мы выберем анимацию Move in, то листаться будет весь фрейм, включая верх и низ:
Поэтому применим хитрость. Скопируем slide 2 и поместим его в первый фрейм, но при этом выведем его за границы фрейма. Тогда он для Фигмы там будет, хотя нам он будет не виден. А во второй фрейм так же скопируем и спрячем slide 1. Проделаем то же самое для каждого фрейма.
И вот какая галерея тогда получится:
Слайдер
Тут тоже есть нюанс. При Smart Animate Фигма учитывает не только начальное и конечное положение объекта, но и тот способ, которым мы эти положения получили.
Для создания слайдера я скопировала фрейм, на новом фрейме перетащила фотографии и маркер слайдера. Всё работает, как надо.
Но если я буду не перетаскивать маркер, а, например, отражу его по горизонтали, получится совсем не то, что я хотела бы:
Как передавать в разработку
К сожалению или к счатью нет единого стандарта передачи настроек анимации разработчикам.
Самый лучший способ — спросить непосредственно у разработчиков, как им удобнее получать от вас информацию.
Но не всегда есть возможность узнать напрямую, да и некоторые фронтэнды могут сами не знать, как им удобнее, поэтому на всякий случай всегда:
1.В расшариваемом макете пишем коммент (прямо текстом рядом с нужным местом на макете, не через инструмент комментирования), что нам тут нужна анимация. Описываем, какая, призываем разработчика смотреть на вкладке Prototype и Inspect.
Вот так выглядит панель Inspect для объекта с анимацией
2.Проигрываем анимацию в режиме просмотра, записываем экран, сохраняем видео и/или делаем гифку, прикладываем к макету и/или письму (сообщению в мессенджере). На Маке запись экрана вызывается кнопками cmd+shift+5, на Винде — через game center, например, как в этом видео. Получившееся видео можно перегнать в гиф в любом онлайн-конвертере, можно оставить в формате видео. Ещё могу посоветовать бесплатную и простую программу Giphy, но она только под мак.
В общем, самое главное — донести свою мысль максимально подробно и доступно. Не надейтесь, что если просто заанимировать макет, фронтэндеры сами это заметят и пойдут смотреть в настройки. У них хватает своих забот, поэтому чем точнее вы донесете до них свой замысел, тем лучший результат в итоге получится.
Заключение
Самое главное для освоения анимации в Фигме — больше практиковаться. Фигма, к счастью, в отличие от большинства серьёзных программ для анимации, интуитивно понятна в большинстве случаев.
Подписывайтесь на мой телеграм, там пишу всякое о дизайне 😊
Комментарии
Войдите, чтобы оставить комментарий.