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