![]() ![]() Let's start out with a simple example, which is just jumping to another screen or scene. View and Download my Book Collection Pie and Follow Along → For a deeper dive into how to use all of these and how to form conditional and use formulas I highly recommend checking out ProtoPie School where you can take their ProtoPie 101 Crash Course and even gain a certificated upon completion. This table is helpful to see a high-level overview of what they are and the responses you can apply to them. There is a large list of interaction pieces that you can choose from. This is amazing because it makes it very easy to target very specific elements and objects and make them do specific things. Everything you do will have an object selected, then you'll have a trigger, and you'll apply an action to that that will result in a response. Where Figma is a screen-to-screen connection for prototypes, ProtoPie uses an Object, Trigger and Response model. The thing about ProtoPie that's really going to help you wrap your head around it is understanding the interaction model. Design panel ProtoPie’s Interaction Model Animations Timeline panelĭesign panel - probably the most familiar panel this give you the options to change the visual look or your select objects. ![]() And then you'll see that you can apply all of these other transitions, similar to Figma, you have these different styles of transitions that you can apply. Tiggers/Responses panel - This panel contains all of the available trigger interactions as well as the responses Tiggers/Responses panelĪnimations Timeline panel - And then this little panel that is hardly noticeable when you click on one of these range indicators, you can change the length of the animation, the duration of it, and you can move it to start at different times, this is kind of your timeline for each of these responses, the length, the delay, all of that stuff. Layers panelĬomponents panel - This is where you’ll find components local components, team libraries, and Design Systems Components panel Layers panel - This shows you all of the layers and objects in each of your selected scenes. Scenes panel - shows you all of the frames/scenes that you’ve imported or created Scenes panel The interface of ProtoPie is very similar to other design apps like Figma and Sketch, but you’ll notice a few extra panels. Once we're in ProtoPie, it’s going to load up the designs we've exported from Figma. Introduction to ProtoPie’s Interface Panels If I wanted to change a button color, for example, I can do that, and you'll see that the plugin prompt changes to export object and it will match that exported object to the correct scene in ProtoPie. A Scene is synonymous with a Frame or a screen design in Figma.įigma and ProtoPie are also reciprocal, so if you make changes to the Figma designs, they will be reflected in ProtoPie through that plugin. What's going to happen when you click export is that it's going to take this Frame you’ve selected and convert it to a scene inside of ProtoPie. Next, select your frame and then run that ProtoPie plugin. You can search for ProtoPie inside of Figma > Plugins > Find More Plugins and click on it to install. We're going to install the ProtoPie plugin. Here we are in Figma, and I have my first design which is just the first screen of an onboarding flow. Also be sure to download my ProtoPie files below each example if you want to follow along. This is some next-level prototyping and interaction design, and it's surprisingly easy to do and I'm going to walk you through how you can make all of this stuff yourself. Click to interact with Prototype →Īnd the craziest thing is this voice-activated AI assistant you can speak to and it answer back in real-time! Click to interact with Prototype → Then I made an email sign-in form that you can actually validate. I made a reading app that you can scroll through with these amazing animations and micro-interactions. But when you want to go deeper with micro-interactions, animations and trigger-based prototyping you need software that's a little bit more advanced and you can achieve this with Figma and this amazing tool called ProtoPie. Click-through prototypes are something that we're already pretty familiar with in apps like Figma, Sketch and Adobe DX -creating screen-to-screen connections that mimic interactions, animations and flows. ![]()
0 Comments
Leave a Reply. |