Figma + Rive: как я создаю UI анимации

Всем салют! На связи Андрей Рыбин. Я работал продуктовым дизайнером в Cuberto, Fantasy, THRC и сейчас тружусь в Fasset. В этой статье я поделюсь своим подходом к созданию анимаций для интерфейсов.

У меня также есть телеграм-канал, где я делюсь своими мыслями о дизайне и различными анимациями.

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

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

Если вы продуктовый дизайнер, ваш выбор в целом может быть весьма ограниченным и состоять из одного или двух инструментов для создания анимаций. Я попробовал основные популярные инструменты, такие как Protopie, After Effects, Rive, Principle и могу сказать, что все они как две капли воды похожи.

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

Если вы хотите создать что-то подобное (как на видео ниже), я рекомендую использовать After Effects, так как он удобен для работы с PNG-секвенциями. Однако для большинства продуктовых задач, где необходимо показать сценарий или поведение определенных элементов в дизайн системе, можно ограничиться и привычными инструментами, такими как Rive.

Давайте немного отвлечемся. Я приведу один из примеров своей работы, кажется, я ее сделал в 2020 году. Спустя время я считаю ее неудачной, так как каждый блок и даже текст имеет свою отдельную анимацию при появлении. Это кажется излишним. Все сделано в духе “движение ради движения”, а это точно не про достижения пользовательских целей или приятный опыт повседневного использования. Как минимум, все эти излишние движения могут раздражать пользователя.

Иногда для того чтобы придумать интересное взаимодействие для концепта, я иду за рефами. Это не обязательно должна быть анимация, это могут быть макеты, картинки. Главное — зацепиться за детали и на их истории развить свою идею, в особенности конечно если мы говорим про концепт. Для поиска референсов я часто использую Are.na

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

Начнем. Думаю, если у вас уже есть опыт в After Effects, то понять этот инструмент займет пару часов. Для новичка потребуется чуть больше времени для экспериментов и изучения руководства. Я объясню основы кратко, для подробной логики, вы можете ознакомиться с гайдом или чекнуть их ютуб, где хорошо объясняют каждую кнопку и внутренние фишки. Я просто покажу основы на примере заранее созданной анимации.

По сути, тут есть два режима: «Design» - для создания и редактирования UI, и «Animate» - очевидно, для создания анимации 🔮. Внутри вкладки «Animate» есть шесть колонок, из которых основными являются:

State machine - это область, куда вы переносите таймлайны и управляете ими как "нодами". Здесь вы задаете логику, кнопки, действия и другие параметры.

Timeline - расставляете ключи и настраиваете изинг.

Режим «State machine» я использую редко. Однако иногда бывают случаи, когда полезно "покликать" взаимодействие и обсудить это с разработчиком/продактом - в таком случае хорошо иметь прототип, для этого и нужен «State machine». Далее я расскажу, как я использую этот режим.

Тут все просто. Выбрали фрейм, Edit → Copy as → Copy as SVG, далее открываем Rive, Ctrl+V → Переходим во вкладку «Assets» и переносим наш файл в макет. Изи, но есть момент. Я переношу макет “чистым” без картинок внутри, только шейпы. Поэтому заранее подготовьте ваш фрейм состоящий из шейпов. Картинки добавите позже.

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

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

Также я создал анимацию иконки на отдельном артборде, где свой таймлайн и своя «State machine». Далее полученную анимацию я добавляю к основному артборду, к кнопке, через инструмент «Nested artboard».

Добавил небольшое свечение при наведении для темной и светлой версии. Для того чтобы курсор понимал что нужно производить движение для слоев, к слою с размытием, я привязал элемент «Transform» в разделе «Constraints», перед этим создав «Target shape».

Далее в state machine, в колонке «Listeners», создал действие и выбрал режим «Pointer move» - этот режим будет реагировать на движение мыши и запускать анимацию (таймлайн).

Далее полученные таймлайны нужно соединить в «State machine». Для этого я создаю триггеры, в колонке «Inputs» их 3 типа:

К каждому триггеру я задаю действие. Действия создаются в колонке Listeners и состоят из трех частей:

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

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

Каждое действие, включая выход, нужно указать отдельным условием и переключить значение на true/false (в зависимости от действия). Постепенно вы можете проверять результаты, проигрывая анимацию и фиксируя ошибки.

Финальный результат после связки всех таймлайнов в state machine.

Я обычно передаю Lottie, который можно интегрировать на сайт или в приложение. Если я делаю анимацию в After Effects то использую Bodymovin для создания JSON файла на основе композиции.

А так же я могу предоставить видео/gif с анимацией и это так же будет полезно, например для анимации перехода, объекта и т.д. Отдельно могу приложить параметры и описание:

Всю эту информацию и не только можно найти в ваших исходниках Rive.

Всегда тестируйте анимации с разными кривыми и настраивайте их, исходя из того, как они воспринимаются пользователями. Я бы рекомендовал изучить вот эту статью от Material Design. Там отлично объясняются принципы работы с кривыми.

Как я уже упоминал ранее, режим state machine я использую чтобы “покликать” анимацию. Однако для создания концептов в твиттер, да и даже обычных транзишенов я чаще работаю в одном таймлайне, который затем экспортирую в видео.

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

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

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

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

👉 Следите за мной в моем телеграм-канале или твиттере, где я часто выкладываю различные концепты взаимодействий.