Сегодня мы покажем вам, как использовать плагин LottieFiles для Adobe XD и взаимодействовать с Adobe XD и After Effects. Нашим примером будет прототип приложения для электронной коммерции, где мы разработаем привлекательный и интерактивный интерфейс. 

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

1. Начнём с добавления иллюстрации или значка в Adobe XD. Чтобы добавить лучшие значки и иллюстрации на монтажную область, используйте плагин Iconscout для Adobe XD БЕСПЛАТНО!
   
2. Теперь мы собираемся переместить выбранную иллюстрацию в Adobe After Effects. Для этого выберите «Файл» и выберите «After Effects» в параметрах «Экспорт». При этом все слои выбранной иллюстрации будут перенесены в After Effects.
   
3. В After Effects мы будем редактировать разные слои иллюстрации. Поэтому обязательно выберите фоновый слой контрастного цвета и поместите его внизу, чтобы чётко видеть разные слои. После этого вы можете удалить «Групповой слой».
   
4. Затем определите похожие элементы иллюстрации и предварительно скомпонуйте их вместе в соответствии с вашими предпочтениями. Это поможет вам ускорить работу.
   
5. Теперь пришло время добавить ключевые кадры и анимацию в предварительно созданные группы.
   
6. Если вы удовлетворены анимацией, которую вы только что создали в After Effects, пришло время экспортировать её с помощью плагина Lottie Files для Adobe After Effects. В меню окна Adobe After Effects вы найдёте его в разделе «Расширения». Если у вас его ещё нет, скачайте прямо сейчас.
   
7. Когда плагин откроется, выберите композицию, которую вы хотите отрендерить. Но перед рендерингом не забудьте скрыть фон, который мы создали на шаге 3, чтобы получить прозрачную анимацию.
   
8. Нажмите «Render» и выберите, хотите ли вы сохранить анимацию в виде файла JSON или загрузить её в библиотеку Lottie. Мы решим загрузить его в библиотеку, так как он добавит анимацию в наши личные анимации, что позволит нам получить к ней доступ в любом месте и на разных устройствах. После загрузки анимация готова для доступа из Adobe XD. 
   
9. В Adobe XD выберите LottieFiles for XD (Lottie Adobe XD) в меню плагинов и перейдите на вкладку «Мои лоты», где вы найдёте анимацию, которую вы только что загрузили, в разделе «Личные».
   
10. Выберите свою анимацию и нажмите «Вставить как Lottie».
    
11. Мы почти закончили. Нажмите «Прототип» в верхнем меню Adobe XD. Затем мы выберем кнопку «Разместить заказ» в 1-м фрейме нашего примера и свяжем ее со 2-м фреймом. Это вызовет анимацию при нажатии кнопки «Разместить заказ».
    
12. Теперь просмотрите свой прототип, нажмите «Разместить заказ» и БУМ! Ваша анимация на основе триггера воспроизводится!
    
13. Хотите сделать ещё один шаг и протестировать его на своём мобильном телефоне? Давайте покажем вам, как это сделать. Откройте приложение Adobe XD на своём мобильном телефоне и протестируйте анимацию в режиме реального времени.