Tutorials

Calendar Tutorial in ProtoPie, Part I

A quick tutorial on how to recreate a calendar app with parallax images in ProtoPie.

Rob Cleaton
Rob Cleaton, Lead Mobile Product Designer @ CookpadDecember 16, 2019
Calendar Tutorial in ProtoPie Part I thumbnail

Over the course of the past few months, I’ve been keen to try out ProtoPie and teach myself some useful techniques I can apply to my work in the future.

There have been many different prototype tools over the years and I’ve used a lot of them. All have many pros and cons, but I’ve been eager to find one with a relatively small learning curve (looking at you Framer) that could be super powerful in taking UX and UI designs to the next level.

In this tutorial, we’ll go through creating a simple Calendar UI prototype using PrototPie. I would recommend downloading the ProtoPie Trial for free and this should take about 20mins to finish.

A simple Calendar UI prototype gif
Calendar Tutorial with Parallax Images in ProtoPie

1. Set the scene

Basic ProtoPie file without the interactions

  • Create your vertical monthly blocks, I’m using heights of 532px for ease of demonstration, (can all vary if that's your thing) and a gap of 135px between these blocks.
  • Group the months into a vertical scroll
  • Add square background images and place them at the bottom of the Scene, with their top edge touching the bottom edge.

2. Creating the Calendar vertical scroll

As my 1st image will be on the Scene from loading I’ll follow a different pattern here, you can group all them together in a container in the layers to keep things tidy.

Image container

  • x = 0 / y= 532px
  • height = 375px / width = 375px

First image

  • x = 0 / y= 0
  • height = 375px / width = 375px

Second, 3rd, 4th image

  • x = 0 / y= 135px
  • height = 375px / width = 375px
The number in the red roundel will display the scroll position of the scroll gif
The number in the red roundel will display the scroll position of the scroll

3. Display a scroll position display (Optional)

This will save you a lot of time and super easy to add to save time with finessing if things get complicated.

  • Add a Text layer
  • Add a Detect trigger to the vertical scroll and selecting Scroll from the dropdown
  • Select Formula from the Content dropdown and add your Scroll with the .scrollOffset
How to display a scroll position display step1
How to display a scroll position display step2

4. Parallax Monthly images

Add a Chain trigger to your vertical scroll and select Scroll from the dropdown.

Add a Chain trigger to your vertical scroll and select Scroll from the dropdown

Add a Move response to this Chain and now we’ll add your images one-by-one.

Adding Dhalism image
Adding Blanka image
Adding MBison image

1st image

As this is placed on the Scene from load, this will follow a slightly different logic.

  • 532px (list scroll position before image) = 135px (Y position of image at bottom of the scene)
  • 1334px (list scroll position after image) = -908px (Y position of image of the top of the scene)

2nd image

What we need to add here, is to tell the Prototype the relationship between the positions of the list scroll and the image. This is what ProtoPie calls Range.

Scroll position Range

  • 532px (list scroll position before image) = 135px (Y position of image at bottom of the scene)
  • 1334px (list scroll position after image) = -908px (Y position of image of the top of the scene)
532px is the start of the scroll
135px is the starting Y position of the 2nd image
532px is the start of the scroll and 135px is the starting Y position of the 2nd image

1334px is end position of the scroll
132px is the ending Y position of the 2nd image
1334px is end position of the scroll and 132px is the ending Y position of the 2nd image
Scrolling down the calendar gif
Final prototype

I hope you found this tutorial helpful. In the next coming weeks, I’ll cover the following.

  • Fab/Action Button
  • Burger Menu
  • Monthly horizontal scroll

Download the working file