Published on <a href="https://blog.prototypr.io/simple-navigation-tab-switch-in-protopie-43e488748841?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Briandito Priambodo 
<h4>Understand the basics of ProtoPie while creating some common interactions.</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*s9bmK-3kjThhgc3FA5p6vw.gif">What we are going to make in this tutorial.
ProtoPie is one of the easiest &amp; most powerful interaction design tools to use. You won’t even need more than 1 hour to get the hang of it. This article will guide you through some of the basics to design interactions in ProtoPie.
Important: This is not going to be a quick tutorial. We will learn about the basics thoroughly, so bear with me 🙂
Now to follow the tutorial, <a href="https://www.protopie.io/download/">download ProtoPie here</a>!
<h4>These are the interactions that will be covered in this article:</h4>
<ol>
<li>Page Navigation</li>
<li>Tab Switching</li>
</ol>
<h3>Before We Start</h3>
<h4>Concept Introduction</h4>
To understand ProtoPie, it’s better if we understand the concept of an interaction in ProtoPie. Basically, an interaction consists of 3 main elements, which are Object, Trigger, and Response.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IxewJDc5Tf14iZtuJkRJIA.png">ProtoPie’s <a href="https://www.protopie.io/learn/basics/#Intro">Concept Model.</a>
An interaction happens when you set off a Trigger of an Object which results in a Response from the object. In the image above, the trigger is tap action, and the response is the movement of the object.
However, the relationship between Objects, Triggers, and Responses can be even more complex than that. We’ll get to that later on.
<h3>Importing Your Design</h3>
Before we can create any interactions, we need to import some designs from Sketch or Adobe XD. We can design inside ProtoPie as well.
In this tutorial, we’ll be importing some pages provided in the supporting Sketch file. Download the Sketch file that we are going to use here: <a href="https://www.dropbox.com/sh/yhbw81vef99wzo8/AABbqqoexRlQcFeToikCewr-a?dl=0">Download Material</a>
<h4>1. Importing from Sketch</h4>
Create a new project. Make sure Sketch is open when importing files and that you are on the right Page. ProtoPie will only detect the artboards in the current Page you are in.
<ol>
<li>Go to File &gt; Import &gt; Sketch</li>
<li>A dialog will pop up. In the Artboard selection, select “Home”. Click on Import.</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-MCN3FMD-RAbJsFzflsz_w.png">Sketch import pop up dialog.
Now you have successfully imported a Sketch Artboard to a ProtoPie Scene! Keep in mind that in ProtoPie, Artboards / Pages are called Scenes.
<h4>2. Add a New Scene</h4>
To do some interactions between Scenes, we need to add more Scenes and import a design to it.
On the top toolbar, go to Scene Selection &gt; Add New Scene.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DmHV3GGNfYNfquzrrCg3UA.png">Scene Selection menu.
Once you added a new Scene, we will have a blank screen. And from the Scene Selection menu, you can see that we are currently inside of Scene 2.
Inside of Scene 2, using the method we learned earlier, import “Task Detail” from Sketch.
<h4>3. Manage Your Scenes</h4>
Now, let’s organize our Scenes and rename them for a better documentation. Click on Scene Selection &gt; Manage Scene
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LrVCCkRoR7vYRkqDi322sg.png">Manage Scenes menu.
To rename Scenes, double click on their names. You can also duplicate, add, and delete a scene here. Let’s rename “Scene 1” and “Scene 2” to “Home” and “Task Detail”, respectively.
Now that we got everything settled, let’s get started!
<h3>1. Basic Page Navigation</h3>
In ProtoPie, we can do page transitions effortlessly. Here’s a quick look of the final result:
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*Z6VXzJy9KC0qLKmgZm71IA.gif">Simple sliding navigation.
<ul>
<li>Object: Button, Container</li>
<li>Trigger: Tap</li>
<li>Response: Jump</li>
</ul>
<h4>1 — Selecting a Layer</h4>
<ul>
<li>Home Scene &gt; Select “Task / Read a Book” Layer</li>
<li>Go to Home Scene. Select Task / Read a Book Layer from the Layer Panel, or select it directly from the Canvas Panel (the design view).</li>
<li>We are going to use this layer as a Button to navigate to the Task Detail Page.</li>
</ul>
<h4>2 — Adding a Trigger to a Layer</h4>
<ul>
<li>Home Scene &gt; Interaction Panel &gt; Add Trigger &gt; Tap</li>
<li>Once you’ve selected the layer you can see its properties on the Interaction Panel — which is on the right side of the screen. This panel is used to control the interaction of the scenes.</li>
<li>Tap on Add Trigger, and select Tap.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*J0Q3673sV4kfQO3Bq8JNUA.png">Interaction Panel view. On the right, layer properties. On the left, adding a trigger.
<h4>3 — Adding a Response and Modifying the Properties</h4>
<ul>
<li>Interaction Panel &gt; Add Response &gt; Jump &gt; Slide in &gt; Right to Left</li>
<li>Once you added Tap trigger, there will be a small “+” icon below it. What the icon does, is to add a response to the parent trigger. Click on the “+” icon and select Jump.</li>
<li>In the layer properties panel, there are 2 fields that you need to complete. On the “Jump to” field, select “Task Detail”.</li>
<li>On the “Transition” field, select “Slide in”. Then choose “Right to Left”.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*brMho7R_DrszoEt-tfoojQ.png">Jump response properties.
You have successfully created your first ProtoPie interaction. Try it out in the preview window. From the Home Scene, you can now tap on “Read a Book” card, and jump to the Task Detail Scene.
If you haven’t notice, once you’re in the Task Detail Scene, there is no way to go back to the Home Scene. Try it out yourself, use the Tap trigger and Jump response to make an interaction to go back to the Home Scene!
<h3>2. Tab Switching</h3>
We are going to create a simple tab switch interaction. There will be Active and Inactive button states, as well as some animated transitions between the content of the pages.
Here’s the final result:
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*s9bmK-3kjThhgc3FA5p6vw.gif">The final result.
<ul>
<li>Object: Button, Container</li>
<li>Trigger: Tap (one-time trigger), Chain (conditional trigger)</li>
<li>Response: Move, Opacity</li>
</ul>
<h4>1 — Create a New Pie &amp; Import from Sketch</h4>
<ul>
<li>New Pie &gt; Import from Sketch &gt; Ongoing Task</li>
<li>Create a new Pie, import “Task History” from Sketch, and rename the Scene to “Task History”.</li>
</ul>
<h4>2 — Importing Another View of the Page</h4>
<ul>
<li>Import from Sketch &gt; Completed Task</li>
<li>We want to import another view of Task History page. This time, we don’t need to add a new Scene. Import “Completed Task” from Sketch to the current “Task History” Scene.</li>
<li>Once you imported “Completed Task”, you will see a group called “Completed Task” in the layer panel. In ProtoPie, Groups in Sketch will be imported as a Container.</li>
<li>For now, let’s hide the Container layer away. Move the X position to 390, so that it won’t be seen in the Preview.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6YfiUdCgep7ZoFd8LEG4bw.png">An element outside of the Canvas boundary will not be seen in the Preview.
<h4>3 — Creating a “Button” for the Tabs</h4>
<ul>
<li>If you select the “Ongoing” or “Completed” Layers, you would see a blue outline around the text which indicates the size of the layer. The size of a layer is equal to the size of the touch area.</li>
<li>Unfortunately, both of the “Ongoing” and “Completed” Layers are too small to be tappable.</li>
<li>That is why we are going to put each of those texts inside of a container, and make the touch area for these tabs bigger.</li>
<li>Select “Ongoing” Layer &gt; Add Container (shortcut N) &gt; Resize Width: 187.5, Height: 44 &gt; Move it to the Ongoing tab.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*8vdJSAvsLTFH5WwDq9IR4g.gif">Adding a container and resize it to the tab size.
<ul>
<li>Now we have a button-sized Container. Let’s put “Ongoing” Layer inside of the Container we just add and rename the Container to “Ongoing Tab”.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*G5SSpEaGF77xh8QEmRGjEg.png">
<ul>
<li>We’d want to do the same with the “Completed” Layer. Make a button-sized Container, and put the Layer inside of it. Rename the Container to “Completed Tab”</li>
</ul>
<h4>4 —Making the Active &amp; Inactive Tab State</h4>
<ul>
<li>We need to make the inactive state for the Completed Tab. Let’s make the Completed tab a little bit lighter in color.</li>
<li>Select Completed Tab &gt; Change Opacity to 30</li>
<li>Now we have an “Active” Ongoing Tab and an “Inactive “ Completed Tab.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3fcvvX_EeXSMHGeyt4Ao4Q.png">Ongoing is Active, Completed is Inactive.
<h4>5 — Changing the State of the Tab</h4>
<blockquote>Now let’s breakdown the Responses. When we Trigger a Tap, we want to:</blockquote>
<blockquote>1. Completed Tab Opacity &gt; Change to 100,</blockquote>
<blockquote>2. Ongoing Tab Opacity &gt; Change to 30,</blockquote>
<blockquote>3. Active Tab Indicator Position &gt; slide to the right.</blockquote>
<ul>
<li>Let’s start from number 1: Change Opacity of Completed Tab. Select Completed Tab &gt; Add Trigger &gt; Tap &gt; Add Response &gt; Opacity &gt; Select Completed Tab &gt; Change to 100.</li>
<li>The purpose of this Trigger &amp; Response is to change the Opacity of Completed Tab to 100 when it is tapped. Thus, changing the state from “Inactive” to “Active”.</li>
<li>Once the Completed Tab is “Active”, we need to do the opposite for the Ongoing Tab. From the same Tap Trigger &gt; Add Response &gt; Opacity &gt; Select Ongoing Tab &gt; Change to 30.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*psg33GW7weichEikO_o7sw.gif">The state changed! Unfinished, but we’re halfway done!
<ul>
<li>Now, it’s time to animate the Active Tab Indicator Layer. Before changing a property of a Layer, it’s best to change the Origin to the center of the item. So that whatever changes we made, will be based on the center of the Layer.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Zx_6WFMq1UPDllZc1X60hA.png">It’s best to use centered Origin everytime you want to do change the position / rotation / scale of a layer.
<ul>
<li>Next, we’re going to move the Active Tab Indicator layer to the right. Approximately, we want to change the X position to 281. From the same Tap Trigger &gt; Add Response &gt; Move &gt; Select Active Indicator &gt; Change X to 281.</li>
<li>Look at the end result, we’re almost done! Next, we just need to switch between the content of the tabs.</li>
</ul>
<h4>6 — Switching the Content of the Tab</h4>
<ul>
<li>What we are aiming to do is — To move Completed Task Container to the middle of the page, and move Ongoing Task Container to the left. Refer to the image below:</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rsCcHdgiE5jBdM2LVZ4eJg.png">State when the Completed Tab is active.
<ul>
<li>First, let’s change both of their Origin to the center.</li>
<li>Then, Add Trigger &gt; Chain &gt; Select Completed Tab &gt; Property Opacity</li>
<li>Chain is a Conditional Trigger. Quoted from the <a href="https://www.protopie.io/learn/basics/#Conditional_Trigger">documentation</a> of ProtoPie, it is “An action where the changes of a property of one layer changes the property of another layer.” — IF layer X is changed, THEN layer Y will be triggered.</li>
<li>So, what we are doing is essentially: detect IF the Opacity of Completed Tab is changed, THEN something will be triggered.</li>
<li>Now that we have added a Chain, time to add some responses. Add New Response &gt; Move &gt; Select Completed Task. Once you’ve added the Move response, you will notice a difference in the properties panel. There are “Mapping” and “Range” instead of the simple Move X &amp; Y.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g-OPWEYM1ARndRraRe59IA.png">Mapping &amp; Range1
<ul>
<li>Mapping, is the connection between the chain &amp; the response. In the above example IF the Opacity of Completed Tab is changed to 30, THEN change value of x=561.5 &amp; y=393.</li>
<li>The second one means: IF the Opacity of Completed Tab is changed to 100, THEN change value of x=187.5 &amp; y=393</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*_U_geDS9bFOEkLjSigEXVQ.gif">Oh yeah, now we’re talking!
<ul>
<li>Now what we have to do is to add another Response for the Ongoing task, and hide it to the left. Add New Response &gt; Move &gt; Select Ongoing Task.</li>
<li>Set the Move properties to look like this:</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sMQ0TIQhR3Mb5s3mpeCPdw.png">Left, Properties of Completed Tasks. Right, Properties of ongoing tasks.
<ul>
<li>Check out the end result. You realize that once we went to the Completed Task, we can’t go back to the Ongoing Tab. Now, we only need to do the opposite for the Ongoing Tab!</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*SB17yl6PfoeKfhSN_LTEmw.gif">Okay, we need a way to go back to the previous page.
<h4>7 — Going Back to the Ongoing Tab</h4>
<ul>
<li>To go back to the Ongoing Tab, we need to do the same thing we did to the Completed Tab. We will go through it only briefly, since the topic has been covered above.</li>
<li>Select Ongoing Tab &gt; Add Trigger &gt; Tap &gt; Add Response &gt; Opacity &gt; Select Ongoing Tab &gt; Change to 100.</li>
<li>From the same Tap Trigger &gt; Add Response &gt; Opacity &gt; Select Completed Tab &gt; Change to 30.</li>
<li>From the same Tap Trigger &gt; Add Response &gt; Move &gt; Select Active Indicator &gt; Change X to 94.</li>
<li>You don’t need to add another Chain trigger, because we have set the Chain Mapping based on the Opacity change of Completed Tab. Thus, we only need to change the Tab button state.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*s9bmK-3kjThhgc3FA5p6vw.gif">Aaaand we’re done.
<h3>Conclusion</h3>
You now have a fully working Tab Switch prototype. You can actually explore more and extend this Tab Switch prototype even more; using swipe gesture to switch Tabs. Tip: It can be done using the Paging Container.
By following this article, you have learned about some of the most essential features of ProtoPie, such as the Chain Conditional Trigger.
If you have any questions or want to start a discussion, just leave a comment below. I hope you find this article useful, and thanks for reading!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=43e488748841" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/simple-navigation-tab-switch-in-protopie-43e488748841">Simple Navigation &amp; Tab Switch in ProtoPie</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Simple Navigation & Tab Switch in ProtoPie

Understand the basics of ProtoPie while creating some common interactions.

Top Stories