We say a
lot about...
everything

ProtoPie is an advanced prototyping tool that helps you create realistic prototypes and share them easily, on any device. You don’t need any coding skills, and it’s pretty simple to use. Those are the reasons I decided to use it too.

I’m not going to write about ProtoPie’s characteristics because there is an enormous number of articles covering that topic already. Here is one I found very helpful and detailed, combining lots of articles, tutorials, and courses on ProtoPie.

I will present the problem I had and the solutions I made in ProtoPie.

So, let’s start!

I was designing an iOS app and, since I wasn’t using default iOS behavior for all the components, I needed to show my idea to developers. ProtoPie ended up being perfect for that. It’s easy to handle – I just send them the link, and they can see the animation at any moment, on any device.

Interestingly, ProtoPie has its own cloud, so you can save all your projects to the cloud and share any time. Also, you can run the app on your device and test it like it’s a real app which is very helpful. And the really cool thing is that it also imitates native interactions such as vibration, sound, accelerometer, push, etc.

Because ProtoPie is a high fidelity prototype tool, I decided to use it for my not very simple, but also not very complicated animation. In the next example, I’ll show you how I animated sticky tabs, step by step.

First, I imported screens from Sketch. You can also import screens from Adobe XD or Figma. Since I already know how to animate the page and content scroll, the question was how I can create the content scroll and still have the tab buttons stuck on the header. So, the thing I was trying to accomplish here is to stick the tabs on the header when scrolling.

Since we don’t have similar behavior in the app, I tried to animate how the tabs would stick to the header when scrolling to avoid potential misunderstandings with developers.

I started thinking about the best and the easiest way to make sticky tabs in ProtoPie. I tried googling it, but I couldn’t find anything similar. (If you do, please let me know 🧞 ). Also, I assume there are a few ways to make the animation, but I’ll present mine, and maybe it will be helpful to you as well.

When you import screens, make sure that you renamed all the layers. It will be much easier for you to navigate through ProtoPie.

The first part of my animation was adding two screens to ProtoPie (Scene 1 and Scene 2). I grouped all the elements in Scene 1 and took out all the elements from the group that are repeated in Scene 2. In my case, this was the header. After that, I created a paging container and put my Scroll group in that container. Make sure that the size of the container is 100% width and height.

Created Paging and Scroll containers.

The next step was inserting layers from Scene 2 to Scene 1. First, group all elements (except the ones that repeat, you can delete those), and paste them in Scene 1. Also, when copying, make sure that you add the group from Scene 2 to the page container. Make sure that position starts at the width of the first screen, in my case 375px.

So, when you start swiping, it goes between the screens.

What I needed to add next is a trigger. So, when I click on any point, the pages should swipe. In my case Info or Discussions. When Tap, it would trigger the pill button to a certain value. I also repeated that step with the scroll content from both pages. Also, I needed to be sure that the color of the text in the pill button is changed when swapping.

After we make sure that the pill swipes right when we click on Discussion, we also need to do that for the Info. Pretty much the same thing, we only need to make sure that the position and colors are both correct.

So, this is a pretty common interface and it’s easy enough. You can also change the duration of the movement. I noticed that my animation was too fast, so I changed the duration time from 0.2 to 0.5. Much smoother and nicer if you ask me.

The second part of my animation was to stick tabs to the header when scrolling. In my mind, the logical thing was to duplicate Tabs, position them in nearly the same position the Tabs stick when scrolling, and give them 0% opacity.

After that, I knew I needed to trigger that opacity change from 0% to 100% when scrolling, so I used the option Chain - an action where the changes of a property on one layer change the property of another layer.

In my example, when scrolling to a certain position, the opacity should change from 0% to 100% and reverse. So, the only thing that you need to define is the range (start and finish positions). I knew exactly what values I needed to enter for my animation to be accurate, so you would have to adjust the values for your animations. And that's pretty much it.

You can repeat that on every screen you need, just make sure you have all your layers in the right order and, I repeat, make sure all your layers are renamed. This will make your job much easier.

The final animation.

You can also find this shot on 🏀Dribbble.

If you have any questions or comments, send me a message on ana@arsfutura.com. Good luck prototyping! ✨