Говорим на одном языке: как дизайнеру передавать анимацию в разработку и быть уверенным в финальном результате

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

Создание интерфейсной анимации — это примерно 35% от задачи. Остальные 55% принадлежат разработчикам, от которых будет зависеть финальный вид и функциональность приложения, а между этими процентами — попытка понять технический и визуальный языки друг друга.

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

• триггер,
• эффект,
• тайминг,
• изинг.

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

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

Интерфейсная анимация — это комплексное решение, которое влияет на восприятие приложения пользователем и затрагивает большинство свойств объектов на экране. Обычно передача макетов в разработку требует от дизайнера использования решений со встроенными инструментами для экспорта. Это может быть After Effects, Figma и плагин Aninix в Figma, Principle, Protopie.

After Effects можно использовать для создания Lottie-файлов, которые удобны для анимации лоадеров, персонажей, микроанимаций, ошибок и состояний загрузки. Для экспорта нужен один из двух плагинов – Bodymovin или LottieFiles. Библиотека Lottie делает парсинг всей анимации и создаёт JSON-файл, который можно встроить в код сайта или в приложения.

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

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

В Figma есть Inspector — режим для разработчиков с полем с атрибутами анимации. В него входит описание свойств кривой изинга, продолжительности и задержка.

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

В Aninix удобная и простая передача в разработку: дизайнер генерирует ссылку, по которой можно посмотреть все атрибуты движения каждого объекта. Сам файл прикрепляется к фрейму в Figma и помечается специальным значком.

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

Слабое место Principle — отсутствие отдельного инструмента для передачи анимации в разработку. Экспортировать макеты можно только в. GIF или. MP4 — это означает, что программистам придётся установить приложение для отображения всех настроек, деталей и характеристик анимации.

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

Если говорить о передаче макетов, то в Protopie придумали свой способ: дизайнер записывает скринкаст, после чего платформа генерирует ссылку на файл, в котором есть изменения свойств и таймингов всех слоёв на экране. Ссылку можно отправлять кому угодно, но редактирование всё равно будет доступно только в исходнике.

Иногда к инструментам для анимации можно и не прибегать — существуют библиотеки решений с открытым кодом, а также каталоги готовых анимаций, которые без проблем импортируются в код. Среди основных источников — Youtube, CodePen, Lottie, Rive и реальные сайты и приложения.

На YouTube можно найти много интересных эффектов с разбором кода. Такой подход экономит время разработчика и повышает насмотренность дизайнера.

Ещё можно заглядывать на канал Design Code — там много обучающих роликов по разработке на SwiftUI, React и Flutter, проектированию в Figma, анимации и работе в Spline. Авторы разбирают как отдельные фичи, например 3D-свайп карточек с параллаксом их из ленты, так и вёрстку целых экранов и флоу. Также интересные туториалы по разработке на SwiftUI публикуют Kavsoft и AnthonyDesignCode.

CodePen — веб-редактор кода HTML, CSS и JavaScript, который позволяет экспериментировать с кодом прямо в браузере. Находками и решениями можно поделиться с комьюнити — это напоминает Dribbble, только для разработчиков.

Для дизайнеров CodePen представляет большой каталог интересных эффектов и анимаций с открытым для просмотра и копирования кодом — разработчику нужна будет только ссылка на pen, чтобы оценить, реально ли сделать похожий эффект. Проекты можно быстро копировать и менять под свои настройки — цвет, отступы, скругления, контент и все атрибуты движения. Решения подойдут для веба, но для мобильной анимации платформу можно использовать как базу референсов.

Lottie — библиотека для iOS-, Android- и веб-разработки, которая позволяет рендерить анимацию и проигрывать её в приложении в реальном времени. Каждый макет — файл, который можно изменить и переиспользовать в других проектах. Кроме того, c помощью плагина в Figma Lottie-файлы можно вставлять сразу в дизайн в виде. GIF — они будут воспроизводиться в режиме прототипа.

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

Подход заключается в рендере файлов на облачных серверах — разработчик просто вставляет в код ссылку на анимацию, которая лежит в профиле Rive. А так как ссылка остаётся постоянной, то все изменения в дизайне автоматически транслируются в рабочее приложение или на сайт, куда встроена анимация. Решение поддерживается на разных платформах и языках и значительно облегчает и ускоряет загрузку приложения.

В Rive также есть комьюнити, как в Figma или CodePen, откуда можно брать готовые анимации.

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

Красивые готовые сайты с анимациями можно посмотреть на Awwwards, Godly или hoverstat.

При передаче анимации в разработку важно помнить о трёх основных правилах:

1. Чтобы анимация в релизе совпала с анимацией у дизайнера в голове, разработчику нужно знать все атрибуты движения — триггер, эффект, тайминг и изинг. При этом есть исключения, когда движение можно описать словами.
2. Библиотеки анимаций и готовые решения — отличный способ сократить рабочее время дизайнера и ресурсы программиста. YouTube, CodePen, реальные сайты — иногда этого достаточно, чтобы понять друг друга.
   
3. Во многих программах для анимации есть встроенные механизмы для передачи файлов в разработку — это также неплохая возможность сэкономить пару лишних часов или нервных клеток.
   

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

#red_mad_robot #animation #animationhandoff #code #develop