Set up a slide-in menu

You’ll have interacted with many a slide-in menu when using mobile apps. Prototype your own by following these steps!

1. Create your first screen. For this example, we used a 375 x 812 frame for an iOS device, again for a mobile version of the same fictional travel company site. The key element here is the hamburger icon that we placed in the right of our top nav bar, which the user will click to trigger the slide-in menu.

2. Create your second screen, which again is just a duplicate of your first screen but with the slide-in menu on top. After duplicating our second screen, we added a partially transparent (0% opacity) dark rectangle on top (#1B212D), and then added a light (#F1F1F1) 169 x 812 rectangle on top of that, aligned to the right. We added a stack of menu items, left aligned, and an “X” in the upper right.

3. Add your first transition. First, click the “Prototype” tab on the right sidebar in , then select the hamburger icon in your first frame.

  • For Interaction, select “On Click”.
  • For Destination, select the name of your second frame.
  • For Transition, select “Instant” from the Behavior dropdown.

4. Add your second transition. Depending on your project, you may want the user to specifically have to click the “X” in your menu to close it — in which case, you would select the “X” to add your transition.

For our example, we wanted to user to be able to click the “X” or anywhere outside of the menu to close it, so we’re just selecting our entire second frame to add our transition (Technically this means that while in present mode, you’ll be able to click anywhere within the menu to close it as well, which isn’t quite right… but as of right now, Figma doesn’t allow you to exclude specific objects when adding a transition to an entire frame).

Note that you are going to select all the same dropdown items again in the Prototype sidebar, but this time make sure the Destination is your first frame.

Last, see it in action! Click the Play/Present icon in the top-right of the Figma interface (it’s just to the right of the blue “Share” button). This will open your file as a prototype in a new tab. Click to watch your menu appear and disappear.

You’ll notice that the menu isn’t really “sliding” in from the side; while Figma recently added “Slide” as an option in its Behavior dropdown, at the time of writing this can only be applied to entire frames, not specific objects within frames (like a side menu). Thus, using the “Slide” behavior for this particular example isn’t entirely realistic.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here