Protopie Beginner's Tutorial - Prototyping on Steroids!

bit.ly/3MoqcRS 👈 Learn UI/UX Today. Use "UI2022" for 15% Off!
-- Today, we're going to start the first in a series of tutorials related to Protopie. Protopie is the most advanced prototyping software you can use to take the UI designs you create in apps like Figma and Adobe XD, and make them truly interactive. The capabilities of this app far exceed the prototyping features found available in Figma/Adobe XD. So, for this first tutorial, I will show you how to create an elaborate drag and drop / delete sequence.
0:00 - Introduction
0:52 - Learn UI/UX Interactively
1:38 - Design in Figma
5:50 - Protopie Prototyping
22:24 - Final Project Preview
22:30 - Final Thoughts
Let's get started!
#protopie #prototyping #uiux
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Expect more Protopie tutorials in the future! It might even be fun to go from Figma -> Protopie Prototype -> Realize it on the web.

[@djaouadbousmaha4761]

I need tablette design

[@taggounet]

Your videos are always really informative, thank you for all your work!

[@London2ATL]

Protopie is the future, I've jumped on it and you can do anything you imagine. The variable and formula range triggers are so interesting.
I haven't scratched the surface. It seems intimidating but once you understand, an object, trigger and response, you're on your way.
I wouldn't use it for UI but definitely prototyping.

[@bobbradleybell]

Nice Video. Hey Gary, quick question.
What's your favorite workflow por prototype UI animations?(considered that UI was made on Figma).
I mean, we have AEUX, FigMotion, Jitter anf Protopie.

[@Heico321]

I looove ProtoPie! ❤️ Have been using it professionally for a couple years now. 😊 Unfortunately, it's a bit pricey for private use.

[@madhoundes]

Amazing keep pushing more protopie tutorials

[@sasinnisar83]

Damnnn we needed something like this

[@SzabatDesign]

I bought the course, thank you very much! Is it possible to enable English subtitles? It would help me a lot ☺

[@Jennifer-fk5xi]

Thanks!

[@MissMe1111]

when using protopie is it best to import a digital wireframe or can you skip the digital wireframe and use a drawn wireframe to prototype inside protopie? I ask because you didn't do any designing inside protopie.

[@Amiltondesigns]

Does this work with Figma’s auto layout feature as well or do the elements have to be in groups?

[@Nodsaibot]

have you tried LIGMA?

[@GraveRave]

Sweet!

[@dinaharis9915]

I have a problem the 'Export' button is not active even the frame is selected

[@UnrealVision]

Wow! That's new... Some months ago, protopie wasn't free to test/use. Cool!
EDIT: Kind of, 30 days only.

[@paulb2948]

@DesignCourse So is Figma taking the lead over XD?

[@DesignCourse]

It has for quite awhile, but this Protopie isn't made by Figma or anything.

[@AhmadRaza-mw7ux]

❤️❤️❤️❤️❤️

[@denaghazi9324]

Is it 💯 free? How much is it compatible with Adobe XD?
And as someone who works in a team with coders, are the results coming out of protopie almost impossible for coders to achieve? ( XD pretty much gives you functionality that is executable in code)

[@edenassos]

No, nothing is free in this world.

[@Nodsaibot]

Bill Maher is a designer

[@harlockmbb]

Protip: Adobe XD is laaaaag in the browser preview when you use a couple of component states. Keep on Figma.

[@theisoj]

First

[@mkkkkkkkkkk]

to be honest, i expected something better

[@DesignCourse]

I'll create cooler stuff soon.

[@mkkkkkkkkkk]

@@DesignCourse cool

[@ftnsco]

This is terrible. 😣 Not only you need to be a programmer to do this, but you also need to learn a clumsy UI, perhaps it’s easier to do this with few lines of js and css…

[@omariblake21]

I agree. I started watching a few protopie tutos and there are too many steps that I prefered using webflow to preview my app prototypes for clients/recruiters. With js , html and css it's a few mins and you are done.

[@edenassos]

Why do you need to be a programmer to do this? It's just clicking on things. Maybe the problem is you.

[@koenvanniekerk4231]

If you’re not making a tutorial, you can do this (minus the Figma part) in under a minute.
This makes Protopie a pretty impressive tool for all non-unicorns!