Interactive components in ProtoPie

Cover image with a teal lightning icon on a dark background

As a kid, I loved playing with Lego blocks, building anything my imagination could conjure up, one block at a time. My brothers and I would spend hours building epic structures and vehicles, each more intricate and imaginative than the last. We would mix and match blocks in all sorts of new and unexpected ways, and it felt like our creativity knew no bounds.

In my adult life as a designer, I have found similar excitement and wonder in working with UI components. If you are into high-fidelity prototyping, ProtoPie components will be your dream set of Legos.

Components in ProtoPie are reusable sets of interactive layers. They simplify the prototyping workflow and allow you to create prototypes quickly and efficiently. With components, it is easier to create consistent designs.

Let’s say you are creating a kiosk app for a pizza shop. You have already drafted the design in Figma and exported it to ProtoPie through the plugin. Now it is time to bring it to life.

Local components

To create a reusable button component, select the button group in the layers panel and press the component icon in the toolbar at the top of the window (Cmd+K). When you look closely at your layers, you will notice that some have changed their colour to teal. It is how you distinguish regular layers from component instances.

You access all your local components from the components panel. There, you can group related objects using the slash notation. For example, you can use “button/primary” and “button/secondary” to place both buttons inside one component group. Not only does it help to keep your list organised, but it also makes it much easier to browse.

Creating and organising components in ProtoPie
Creating and organising components in ProtoPie

Touch area

The slider is a protagonist of this interface. It will control the thickness of the pizza’s crust. Create the component from the slider group and double-click on its thumbnail in the components panel to enter the edit mode. Now you should only see the layers of your slider.

With accessibility in mind, we should make this control easy to grab. Select the knob and go to the properties. At the bottom, check the touch area and add padding on all sides.

Adjusting the component’s touch area
Adjusting the component’s touch area

Drag interaction

When you have set the touch target, you can focus on the slider interaction. Select the knob layer and add a new Drag trigger with the Move response. When a user initiates the drag interaction, the knob will follow his finger position.

To prevent the knob from moving beyond the slider boundary it is necessary to restrict its movement. The easiest way is to group the knob with the background and set the movement limit to the parent container.

Setting limits to the drag interaction
Setting limits to the drag interaction

Slider snapping

In our case, the slider has three possible values for thin, regular and thick crust. To create a more seamless user experience, we can snap the knob to the three possible options of our component. It will restrict the knob’s movement to the pre-defined values, allowing users to personalise their order without focusing on precise movements.

Define three conditions for the Touch Up trigger with distinct Move responses. Check the x position of the knob when a user stops dragging and lifts their finger. If the knob lands below 1/3 of the slider width, set its position to 0 on the x-axis. For x-coordinates equal to or greater than 1/3 and less than or equal to 2/3, shift the knob to half of the slider width. For coordinates greater than 2/3, move the knob to the full width.

Creating a snapping effect for the slider component
Creating a snapping effect for the slider component

Previewing component interaction

In Edit Mode, you can play with your component’s interaction. It is useful when you are working on complex structures. To see your logic in action, go to the toolbar at the top-right corner of your window and press the Preview icon.

Previewing the slider interaction
Previewing the slider interaction

Sending messages

The true power of ProtoPie components stems from their ability to communicate with the nested instances and other objects in the scene. Since they are isolated entities, you need to use Send responses and Receive triggers.

From the slider component, add a Send response to each condition with the same message. Make sure to select the Parent channel. Next, check the option to send a value alongside your message. With the first condition, send a value of 1, for the second 2, and for the last one- 3. These numbers will help you identify your component’s current state.

Component’s send response
Component’s send response

Receiving messages from components

In the scene, create a new variable to store the thickness option. Set its default value to 2. It represents the default state of the interface.

Then, add the Receive trigger. Set the channel to Receive from Component and select the slider component you had created. Choose the message to listen for and assign the value from this message to the variable.

Assigning values received from the component to the variable
Assigning values received from the component to the variable

Controlling UI elements with components

As you remember, we have three conditions inside our component. We also send three values to the scene and assign them dynamically to the variable. With the Receive trigger, we can set different interactions based on these values.

When the variable is equal to 1, set the vertical scale of the illustration to the lowest value representing the thinnest crust. If the thickness is 2, change the scale to a middle value. For the thickness variable equal to 3, scale the crust even more.

Now you have a fully functioning interactive component that controls your scene.

The finished interaction
The finished interaction

Documentation is a vital aspect of working with reusable components. ProtoPie comes with the Component Guides feature, an ever-so-helpful tool to explain how to use specific instances from your interaction library. It enables you to provide your team members with a detailed description of the component’s purpose, and information about overridable variables, Send responses and Receive triggers with their corresponding messages.

To edit a Component Guide, select the component from the library and click on the pencil icon in the property panel.

You can preview this guide in your scene by selecting the instance and clicking on the guide icon in the component section of the property list.

Editing the Component Guide
Editing the Component Guide

Imagine you have just spent hours designing the perfect component for your latest project. But wait, you suddenly realise that you will need this component in multiple projects to come! Fear not, because the solution is simple: create a library file.

There are two types of libraries available for all plans — Personal and Public. If you are working solo, a Personal Library is just what you need. It lives in your personal space in the cloud, so only you can access it. Think of it as your very own secret stash of reusable components.

There are also pre-made libraries like the iOS or Material Design UI Kit. These libraries are available for anyone to use and can save you plenty of time and effort.

Editors on Pro or Enterprise plans can additionally create and use Team Libraries.

Imagine having a set of building blocks that not only allows you to construct remarkable structures but also enables you to create innovative solutions quickly and efficiently. That is precisely what interactive components do for designers.

Similarly to how Lego blocks work, interactive components can be combined and rearranged to compose new structures, making it easier to prototype and iterate on designs. And when organised into libraries and accompanied by helpful guides, these components become even more useful, allowing teams to work together more effectively.

Read the full article here

Leave a Reply

Your email address will not be published.

What I Learned from Writing 150+ Design Articles

What I Learned from Writing 150+ Design Articles

5 Key Lessons That Can Help You If You’re Thinking of Writing A rewarding

You May Also Like