![Cover image for Основы анимации интерфейсов в ProtoPie [Updated]](https://ux.pub/images/D4RNN-PVaa7RqXMkuJR4aE4Zb6GONCAmt6XwXmMpGcI/s:1000:420/mb:500000/ar:1/aHR0cHM6Ly91eC5w/dWIvdXBsb2Fkcy9h/cnRpY2xlcy95NHow/c2Z2dnI3azhnd3Bl/bWVrdC5qcGVn)
Несколько уроков о том, как создавать прототип в 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)
Когда-то давно пробовал ProtoPie, не думал что он так развился) А есть какая-то возможность экспортировать анимации для кодеров?
Есть, выглядит это таким образом:
cloud.protopie.io/p/f53cf5733b/r/c...
Привет. А есть возможность сохранить в лотти, например, и потом сразу использовать в апе или тут только анимации интерфейсов можно делать? Афтер не заменит в общем? Жду нормальный инструмент, что от Affter Effects отказаться)
Это скорее круче афтера, если нет сложный анимаций.
В лотти нельзя, но можно лотти в протопай. Тут по сути анимация интерфейсов и его элементов происходит.
Все таки если лотти и ае для одних задач, а протопай для других.
Просто очень круто, что в Протопае можно создать текстовое поле, ввести текст и вывести то, что ввел в нужном тебе месте. Это частично программирование без кода.
Этот полезная фича 👍
Ну это только одна из) Возможность использовать камеру телефона, если прототип открыл с мобилы, возможность в переменные записывать не только текст, но и цвета и цифры. Так же возможность создавать условия поведения для объекта используя логические функции. Ну в туторах все это есть )
Умеешь заинтриговать)
Это типо шарим ссылку кодерам, чтобы они посмотрели тайминги и другую инфу?
Да, они снизу видят таймлайн, а справа значения начальное, конечное и текущее, а так же сколько длится анимация, ее тип и задержку
Это уже прорыв, пошел попробовать) Спасибо вам
Очень интересно! Подскажи какие практические задачи решает инструмент в твоей работе?
Я раньше прототипы собирал в Adobe XD или в Sketch. Но нужны были более лучшие прототипы, чем это позволяют сделать другие сервисы. АБ Тестирование и самому потыкать, посмотреть как это работает полезно бывает