Learn how to use the Prototype panel to create a slide-in menu when an icon is clicked on an artboard.
- [Instructor] Though Experience Design does not really have a motion component in it, you can actually simulate motion by using a bit of an optical illusion actually, and that's what we're going to do in this exercise. We're going to create a slide in menu and it's not that hard to do. So to get yourself stared, open up the slide in menu found in your chapter four download folder, and when it opens, you'll see that we've got two screens here. This is an Android device by the way. We've been spending a lot of time with iOS. Thought I'd mix it up a bit and use Android, and we've got the home screen here and we've got our little slide in menu here, and plan is, is when you click the hamburger menu here, this slides in.
Now this is not that difficult to do so we're going to select Prototype, we're going to click the hamburger menu and then we're just going to drag a wire out to this screen here. This sidebar screen, and that's our target, that's great. We're going to push it right. We're going to just push it to the right. We're going to use ease in ease out and set the duration anywhere between 0.1 and 0.2 seconds. I'm going to use 0.1. Now the rule is, of course, if you all take someone there you got to be able to take them back so we're going to use the back button right here.
So I'm just going to double click the back button down here and I'm just going to swing it back here and we're going to go in the opposite direction. We're going to push left, and you notice that it keeps the same timing, and if we test it using the button up there, the play button, there's my hamburger menu, and you can see that it slides in and if I come back I can come back here. Now another thing you could do is you could actually put an invisible button in here.
That would be just a box with no stroke, no fill, and then just have it link back to the home screen. By the way, while we're here I should explain to you that this was rather easy to set up. If you use the components, and this is a really good example of using those UI kits. I went into the Google material UI and I grabbed a card. This one right here. Let's just zoom in on it so you can see it. So right here, this is the card I used, and I just swapped out the share icon with a map icon in the interface and then grab the hamburger menu.
Which is right here, and pasted it in, and then just grab this and this. Okay so this is the system bar, and this one here is the nav bar, and just copied and pasted them into the design as well. And then just basically threw icons into the cards that I'd copied and pasted, and away we went. Now what I did here was I took the background, all of the background here, and just blurred it out so that when the sidebar comes in, this becomes a little less prominent, and that is kind of how it was done.
You can do all kinds of wonderful stuff using the UI elements and also a little bit of optical illusion, and just to reiterate the optical illusion, all you have to do is just set a short duration and the human eye will actually fill in the motion for you.
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.
Q: This course was updated on 08/15/2018. What changed?
A: New videos were added that cover the Search Assets feature, using a grid in XD, the Paste Interactions feature, creating element overlays, fixing element positions, the Design Specs feature, and exporting a project to Zeplin.