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. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |