In this prototype, we will create a drawer menu for our application. We will add some behavior for a FAB button, and we will add a simple example of how to prototype a search functionality to validate our flow. 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_A22_Drawer_Navigation_Prototype_Designs.zip code bundle. You can also download this tutorial in Framer from the Asset_A6462_A08_A23_Drawer_Navigation_Prototype.framer.zip code bundle.

In this example, all our screens are placed in the same artboard in Sketch, grouped by functional elements. Instead of working with artboards, we will work with the layers that are generated when importing each of the groups. These will be accessible using sketch., followed by the group name with underscores.

As in the last example, the first thing we will do is to import our Sketch designs into Framer. To do this, open the Drawer_Navigation_Prototype_Designs.sketch file in Sketch and, with the file open, go to the Import menu option in Framer Studio, select @3x, and click on Import.

The following code will appear in Framer:

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

Now we will choose the device we will work with. Click on the Devices menu and look for the Google Nexus 5X. Once these steps are done, we should see the layers in the layer inspector of Framer, and a preview of the prototype with the drawer menu open in the preview area, as illustrated:

Since all elements of the prototype are located in the same artboard, the first thing we have to do is to hide all the elements that do not belong to the initial view of our prototype. For this, we will initialize all the elements that must be hidden by assigning the value 0 to its opacity property or moving them from their current position in the design to a position outside the screen:

# HIDE ELEMENTS INIT
# Hide Result view
sketch.Results.opacity = 0
# Hide Suggested Search view
sketch.Suggested_Search.opacity = 0
# Hide Search Bar view
sketch.Search_Bar.opacity = 0
sketch.Place_Holder.opacity = 0
sketch.Search_Line.scaleX = 0.2
sketch.Search_Line.x = sketch.Search_Line.x + sketch.Search_Line.width*0.4
sketch.Cross_Icon.opacity = 0
# Hide Drawer Menu
sketch.Drawer_Menu.x = -900
# Hide Black Background
sketch.Black_Background.opacity = 0
# Hide touch target elements
sketch.Cross_Icon_Touch_Target.opacity = 0
sketch.Search_Icon_Touch_Target.opacity = 0
sketch.Menu_Icon_Touch_Target.opacity = 0
sketch.Back_Icon_Touch_Target.opacity = 0
sketch.Back_Navigation_Touch_Target.opacity = 0

As you can see, we have added a _Touch_Target layer for the icons that will be actionable because, due to its small size, it can be complicated to tap on the icon itself. As these layers will only be used to add functionality to our prototype, we will also hide them, reducing their opacity.

We are going to hide the drawer menu by taking it off to the left, out of the screen, so the appearing transition will bring the drawer on to the screen by sliding. The drawer menu will have two positions: one at x = 0 and another at x = -900 . The drawer menu will be at x = -900 when the prototype is initialized. When the user taps on the menu icon, the drawer will animate from off the screen to its final position in the design, at x = 0. We can create states for the different positions of a layer, or we can just modify its values and animate the transition if wanted. For this example, we will create a function that will bring the layer inside the screen and define some listeners that will be active only while the layer is inside the screen:

sketch.Drawer_Menu.x = -900

When hiding the line of the search input, you will see that we have applied a transformation to it. We have changed its scale to scaleX = 0.2 and have placed it to the right. When we show it later, the field will appear from that position, growing as if the line was drawn from right to left:

sketch.Search_Bar.opacity = 0
sketch.Place_Holder.opacity = 0
sketch.Search_Line.scaleX = 0.2
sketch.Search_Line.x = sketch.Search_Line.x + sketch.Search_Line.width * 0.4

Note that the scaleX property scales the element, maintaining its center position. This is why, to set it to the right, we have set the x value using the Sketch.Search_Line.x = sketch.Search_Line.x + sketch.Search_Line.width * 0.4 instruction.