Next-Level Prototyping, Animations and Interaction Design Made Simple! | Figma+ProtoPie

Watch how easily I create 3 advanced prototypes with interaction design including an onboarding screen, login authentication, 3D scrolling animations and live voice-activated AI assistant with ‪@ProtoPie‬ and ‪@Figma‬
🎥 WHAT TO WATCH NEXT
⊚ Text prompt to UI design with AI | • Watch AI Turn a Single...
⊚ Complete Guide to Design Systems | • Complete Guide to Buil...
⏱ TIMESTAMPS
00:00 - Intro
00:40 - Figma plugin
01:00 - Exporting to ProtoPie
01:17 - ProtoPie interface
02:08 - Interaction model
03:22 - Example 1: Scene to scene jump (Beginner)
05:35 - Example 2: Form validation (Advanced)
09:55 - 3D Scrolling Animation (Intermediate)
13:28 - Live voice assistant (Beginner)
15:25 - ProtoPie discount code
🔗 MENTIONED IN THIS VIDEO
⊚ ProtoPie Discount 30% off | designerup.co/perks/protopie
⊚ ProtoPie School | www.protopie.io/?tap_s=378815...
⊚ ProtoPie Design Files | cloud.protopie.io/p/dd513decc...
⊚ ProtoPie voice assistant prototyping masterclass | learn.protopie.io/course/mast...
⊚ Figma Pro Plan | go.designerup.co/figma-pro-plan
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UI/UX) School
⊚ Trained teacher
⊚ KZbin creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | [e-mail]

[@DesignerUp]

📚Ready to master product (UX/UI) design? Come check out our affordable course and become a more confident and mindful designer! | designerup.co/product-design-ui-ux-course

[@eny_codes]

I really enjoyed watching this and will definitely give protopie a lot of attention going forward... thank you for sharing

[@DesignerUp]

Thank you! We’d love to see what you create!

[@damaris5201]

Amazing! Good explained also for beginners

[@osks]

Very nicely done!

[@alazturkmen3945]

Great selection of books btw. Good job!

[@DesignerUp]

Thanks Alaz!

[@simonblanco6716]

nice job . i ove this content

[@Areous]

Amazing, I love and enjoy protopie, you forgot to add that one can also use system status bar to use the mobile time status.

[@DesignerUp]

Oh Amazing didn’t notice that! Thanks Areous 😍

[@revving4891]

From where did you get the cool background video pls tell us

[@vigramsivakumar]

I really impressed by your color palette video, and I learned a lot. Could you please make a video on Layouts hack, tricks and principles please? 🙏 Love from India

[@DesignerUp]

Thanks a lot Vigram! I will add that to the list! Thanks for the suggestion 🙂

[@rahulbajaj4221]

All the examples were great but can you please explain the voice prototype UI more in detail

[@agungrdhan]

I'm trying to run my prototype using Protopie Player on Iphone, but unfortunately, it doesn't make any sound... how do you get the voice to come out?

[@DesignerUp]

Not sure without debugging the prototype, I recommended contacting ProtoPie directly or submitting a ticket to them to help you.

[@juls2334]

Are these ProtoPie prototypes easily embeddable in our UX portfolios? Also is it possible to add phone cases to them?

[@DesignerUp]

Yes! You can easily add a device surround and embed it into your portfolio. Just click on the ‘cloud’ icon in the top right of your prototype and then paste it where you want to embed it go.designerup.co/protopie

[@alexbramwell1870]

Do you think these apps are trying to eat each other's lunch? I want to pick up a multi-app workflow but cant help but feel they will end up treading on each other toes in future release cycles/iterations!

[@DesignerUp]

I don’t doubt that other apps might adopt similar features and capabilities but it’s the underlying interaction model and abstraction layers that won’t change in established products. For example Figma uses a underlying screen to screen and component variant interaction model while ProtoPie uses O,T,R while others like Principle use a flow and keyframe model. It really depends on what you are most comfortable and efficient working with.

[@anosikechukwuebuka4347]

I tried importing my design from figma to protopie but all my vector graphics were gone and I couldn’t get all my designs In at once

[@TyrannosaurusTroy]

ProtoPie looks like an amazing tool, but it's too expensive! 30% off is great, but even then it's $562 for the first year and $804 after that. Considering Figma costs $144/year and you get the ENTIRE Adobe Creative Cloud for $660/year, ProtoPie is just astronomically too much for most of us, even if it is the best prototyping tool.

[@DesignerUp]

It’s true. Seems they are more focused on enterprise so that your company would be paying for it, or for startups that have funding.

[@aiiirlife9273]

Do you need a Protopie subscription for this or is the plug-in free?

[@DesignerUp]

You do need a ProtoPie account - it’s free to signup here designerup.co/perks/protopie You can use our code: DESIGNERUP if you want a discount to upgrade to their Pro tier.

[@emotiveimpact]

Can this be used to make a tinder slide style prototype?

[@DesignerUp]

It definetly can

[@emotiveimpact]

@@DesignerUp how sawy? (Kanye west meme)

[@emotiveimpact]

@@DesignerUp Can you do a video on this? Maybe as a short?

[@DesignerUp]

@@emotiveimpact Here is the ProtoPie file, you can download it and try it yourself! cloud.protopie.io/p/8773762393?& (also the Figma file is here if you need it - www.figma.com/community/file/1204443941893421344

[@emotiveimpact]

@@DesignerUp This is SPARTA! Amazing thank you

[@SioPao105]

The pro pricing, though is super-steep- $67/per month

[@DesignerUp]

Yeah it is a bit steep for individuals but you can use the code on this page for 30% off - designerup.co/perks/protopie

[@michaelschultze3595]

Proto Pie is incredible. But I've never had the real insight. Too many setting options. You would have to use the app daily, otherwise it hardly makes sense, right?

[@DesignerUp]

Agreed, I do think it’s easier to learn and use if it’s part of your regular workflow. But if you have specific use cases that you want to use this for, they do have very good documentation and tutorials on ProtoPie school to help you learn. But yea, it’s definetly a time investment and took me a while!

[@michaelschultze3595]

@@DesignerUp 👍

[@isururanaweera3673]

Too expensive 😢

[@DesignerUp]

Here’s a discount code for 30% off! designerup.co/perks/protopie

[@isururanaweera3673]

@@DesignerUp Thank you!

[@pran2053]

It's not free..