Protopie Beginner's Tutorial - Prototyping on Steroids!

-- 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!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

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.

[LondonATL]

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.

[Heico]

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

[SzabatDesign]

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

[taggounet]

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

[madhoundes]

Amazing keep pushing more protopie tutorials

[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.

[MissMe]

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.

[UnrealVision]

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

[dinaharis]

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

[Amiltondesigns]

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

[paulb]

@DesignCourse So is Figma taking the lead over XD?

[PhantomHarlock]

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

[denaghazi]

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)

[mkkkkkkkkkk]

to be honest, i expected something better

[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…