ProtoPie components 101

Everything you need to know about ProtoPie components but was too afraid to ask.

Components give you a huge amount of power when you are creating prototypes. You can create a set of components that can be dragged and dropped into a prototype and just work. 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.

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

And 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. Believe me, I’ve seen it happen.

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

Making a component

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.

All 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

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

Any native text layer in your component can have its text overridden.

As well as manipulating the layers and text values you can override the following nested object properties in the layer’s properties panel: