![]() ![]() I then move my mouse over to the edit button which then triggers the hover effect for that button, great. When I hover over my empty frame, the edit button appears, no problem. The problem is, it seems like I can’t set separate interactions for different states of a component. For each section, I want to set up separate click interactions that open different modals. The edit button itself is a separate component that has a hover effect wired up within its variant group. What I’ve done is create a component that is just an empty frame with an edit button in the upper right-hand corner. My use case: I want an edit button to appear over a section of the page when you hover on that section. You can create a set of components that can be dragged and dropped into a prototype and just work.Ĭomponents give you a huge amount of power when you are creating prototypes.I think my request is in the same vein here, but I’ll add my use case just for context. Imagine just dragging out a checkbox or a custom button with a cool animation that’s all built-in no mess, no fuss rapid prototyping as it should be.Ĭomponents have flexible layouts, overrides, and can be nested infinitely enabling the creation of modular UI elements. In short, you have everything you need to build an off the shelf design system for your rapid prototyping needs.Īnd remember kids this is a no-code environment so anyone, no matter their skill level can start creating components only after using ProtoPie for a few hours. I guarantee that after reading this you’re gonna feel excited and empowered so put on your seat belt, secure any baggage in your overhead locker and prepare for take-off □. There are a few ways to make a component. Either hit the component button in the toolbar or right-click a group, and choose Convert to Component.Īll components live in the component panel which is docked to the left edge of the interface with the scenes panel. To use a component simply drag and drop it from the panel into your scene. OverridesĪs you would expect components have similar functionality to other popular design tools such as Sketch and Figma, Change something in the master component and all instances will change. Any changes you make to a component instance aren’t reflected in the master. ![]() Hide any layer inside of your instance directly in the layers panel. This is useful if you have optional items and states, just click the eye icon as you would any normal layer.Īny native text layer in your component can have its text overridden.Īs well as manipulating the layers and text values you can override the following nested object properties in the layer’s properties panel:Ĭomponents can talk to each other by using Send and Receive. These work by allowing us to send text messages between sibling components and nested components. If you have any coding experience you could think of these ‘messages’ as EVENT messages. If you don’t have any coding experience and have absolutely no idea what I’m on about then think of them as text messages such as you might send to a friend such as “make me a coffee”. The difference is I can’t guarantee sending that message will get you a coffee. I can guarantee however that sending a message within ProtoPie will enable you to trigger interaction stuff in your components. Up and down your nested component hierarchy, into your scenes and into other sibling components which I think is pretty neat! The Receive trigger You can send messages pretty much everywhere. Receive is a ProtoPie trigger that you set to listen for a particular message. Your Receive trigger is continuously waiting for the message you set. Once received the message will trigger any responses that you have added. Receive is only half the story and won’t work without partner Send. The message can be anything you want but I would stick to verbs, also be aware that messages are case sensitive so go UPPERCASE or lowercase but miX cAse at your peril! Channels Send is a response that allows you to send the message in the first place. ![]() ProtoPie uses the word Channels to describe the destination of the message. Outside of components at the scene level, you have access to the following internal channels With components we are mostly interested in the internal channels.
0 Comments
Leave a Reply. |