In this prototype, we will create a bottom navigation using the PageComponent included in Framer Studio. As in the previous tutorial, the first thing you need to follow this tutorial is to download the Sketch file that will be used in the prototype from the Asset_A6462_A08_A24_Bottom_Navigation_Prototype_Designs.zip code bundle. You can also download this tutorial in Framer from Asset_A6462_A08_A25_Bottom_Navigation_Prototype.framer.zip.

In this example, all our screens have been placed in the same artboard in Sketch, grouped by functional elements. So, we will work referencing the groups as we did in the previous prototype.

Now, we need to open the Bottom_Navigation_Prototype_Designs.sketch file in Sketch and import it into Framer Studio. To do this, you need to click on Import in Framer, select @3x, and click on Import. This code should appear in your Framer project:

# Import file "Bottom_Navigation_Prototype_Designs" (sizes and positions are scaled 1:3)
sketch = Framer.Importer.load("imported/Bottom_Navigation_Prototype_Designs@3x")

Now, we will select the device for the preview. Click on the Devices menu and select Google Nexus 5X; you can activate the Toggle device option to preview the prototype with the phone skin. After these steps are done, you should see the imported code in the code editor, the Sketch groups imported into layers in the layer inspector, and the preview of the prototype in the preview area, as seen in this screenshot:

The first thing we will do is to hide all the Touch Target layers that should not be visible when loading our prototype:

# HIDE ELEMENTS INIT
# Hide Touch Target Buttons
sketch.Find_Touch_Target.opacity = 0
sketch.Calendar_Touch_Target.opacity = 0
sketch.Contacts_Touch_Target.opacity = 0
sketch.Messages_Touch_Target.opacity = 0

As we will create this prototype using the PageComponent provided by Framer, we need to create an instance of this component and add all our section layers to it. However, we will first create a ScrollComponent for the Find Activities layer. We will nest this new scroll layer inside the PageComponent:

# PAGE COMPONENT INIT
# Scroll Find Activities Creation
scrollFind = ScrollComponent.wrap(sketch.Find)
scrollFind.contentInset =
    bottom: 204
scrollFind.scrollHorizontal = false

We have added some contentInset in order to allow the user to drag the content of the scroll component above the bottom navigation. Also, we force the scrolling to vertical direction, blocking the horizontal scrolling.

In the following code, we create a new instance of PageComponent and put it inside the sketch.Mobile_Portrait layer. We will only allow horizontal scrolling on this component with page.scrollVertical = false:

# Page Componen Creation
page = new PageComponent
    width: 1080
    height: 1920
page.superLayer = sketch.Mobile_Portrait
page.scrollVertical = false
sketch.Background.sendToBack()
sketch.Status_App_Bar.bringToFront()
sketch.Bottom_Navigation.bringToFront()
page.addPage scrollFind
page.addPage sketch.Calendar
page.addPage sketch.Contacts
page.addPage sketch.Messages

We have also rearranged the layers to ensure that the sketch.Background background layer stays behind, and the sketch.Status_App_Bar and sketch.Bottom_Navigation layers are in front:

sketch.Background.sendToBack()
sketch.Status_App_Bar.bringToFront()
sketch.Bottom_Navigation.bringToFront()

Then, we will add the four views to the component, which will leave only the first one visible. The navigation between views will be handled by the component itself, allowing users to change from one view to another with a swipe gesture. You can disable the swipe event listener by adding page.content.draggable = false. Also, you can disable the animation when changing between views with the snapToPage method by adding false as the animate parameter in the call of the method. The syntax of the method will be page.snapToPage(page, animate, animationOptions).

page.addPage scrollFind
page.addPage sketch.Calendar
page.addPage sketch.Contacts
page.addPage sketch.Messages