UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Основы анимации интерфейсов в ProtoPie [Updated]
Tarasenko
Tarasenko

Опубліковано • Оновлено

Основы анимации интерфейсов в ProtoPie [Updated]

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

Подпишитесь на мой YouTube-канал
https://www.youtube.com/channel/UCfVBRPG0J60uS8P9SrSwu3A

и на Telegram-канал
https://t.me/uxuituts


01 Экспорт и подготовка дизайна для прототипирования
Делаем экспорт проекта из AdobeXD (По аналогии экспорт делается в Sketch и Figma) в ProtoPie. Так же настраиваем дизайн в ProtoPie для последующего прототипирования


02 Прототипирование экрана авторизации
Научимся работать с анимацией элементов, текстовыми полями и переменными. Так же разберем как создавать состояния элементов.


03 Прототипирование экрана Профиля
Разберем как передавать данные с экрана на экран с помощью переменных, как работать с формулами.


04 Прототипирование экран выбора цвета
Завершаем прототипировать дизайн в ProtoPie. Используем переменные для передачи цвета, исправляем ошибки в формулах и закрепляем пройденное.


Ссылка на исходник дизайна: ProtoPie.pie
Ссылка на исходник прототипа: Design.xd


[Updated]

Scroll Container & Padding Container
Добавил видео, в котором быстро разберемся как сделать Scroll и Padding контейнеры.


[Updated 2]

Circle Progress Bar
Учимся делать круговой прогресс бар с использованием макси-слоя

Критика, Лайк и Подписка приветствуется😊

Топ коментарі (12)

Згорнути/розгорнути
 
crypton profile image
crypton

Когда-то давно пробовал ProtoPie, не думал что он так развился) А есть какая-то возможность экспортировать анимации для кодеров?

Згорнути/розгорнути
 
tarasenko profile image
Tarasenko

Есть, выглядит это таким образом:
cloud.protopie.io/p/f53cf5733b/r/c...

Згорнути/розгорнути
 
varhal profile image
Varhal

Привет. А есть возможность сохранить в лотти, например, и потом сразу использовать в апе или тут только анимации интерфейсов можно делать? Афтер не заменит в общем? Жду нормальный инструмент, что от Affter Effects отказаться)

Тред Тред
 
tarasenko profile image
Tarasenko

Это скорее круче афтера, если нет сложный анимаций.

В лотти нельзя, но можно лотти в протопай. Тут по сути анимация интерфейсов и его элементов происходит.

Все таки если лотти и ае для одних задач, а протопай для других.

Просто очень круто, что в Протопае можно создать текстовое поле, ввести текст и вывести то, что ввел в нужном тебе месте. Это частично программирование без кода.

Тред Тред
 
varhal profile image
Varhal

Просто очень круто, что в Протопае можно создать текстовое поле, ввести текст и вывести то, что ввел в нужном тебе месте.

Этот полезная фича 👍

Тред Тред
 
tarasenko profile image
Tarasenko

Ну это только одна из) Возможность использовать камеру телефона, если прототип открыл с мобилы, возможность в переменные записывать не только текст, но и цвета и цифры. Так же возможность создавать условия поведения для объекта используя логические функции. Ну в туторах все это есть )

Тред Тред
 
varhal profile image
Varhal

Умеешь заинтриговать)

Згорнути/розгорнути
 
crypton profile image
crypton

Это типо шарим ссылку кодерам, чтобы они посмотрели тайминги и другую инфу?

Тред Тред
 
tarasenko profile image
Tarasenko

Да, они снизу видят таймлайн, а справа значения начальное, конечное и текущее, а так же сколько длится анимация, ее тип и задержку

Тред Тред
 
crypton profile image
crypton

Это уже прорыв, пошел попробовать) Спасибо вам

Згорнути/розгорнути
 
smile profile image
Mr Smile

Очень интересно! Подскажи какие практические задачи решает инструмент в твоей работе?

Згорнути/розгорнути
 
tarasenko profile image
Tarasenko • Змінено

Я раньше прототипы собирал в Adobe XD или в Sketch. Но нужны были более лучшие прототипы, чем это позволяют сделать другие сервисы. АБ Тестирование и самому потыкать, посмотреть как это работает полезно бывает