Create an animated mobile menu in Adobe XD

As mentioned in a previous blog by art director Michael Streubert, we’ve been exploring Adobe XD recently as an alternative to Sketch for UI design work. While I agree with much of Michael’s Sketch vs. XD showdown, I find myself more on Team XD than Michael (and won’t even hold it against him much), primarily because of XD’s built-in prototyping and animation tools.

So, let’s do something today in XD that’s not possible using Sketch alone: design, prototype, and animate a mobile menu using XD’s Auto Animate feature.

Here’s where we’re headed: a mobile site design with a “hamburger” menu, which animates into a closing “X” button when triggered, and with a menu that slides in nicely from the right side of the screen to display the site’s navigation.

Create a new XD document with a mobile phone artboard.

In this example, I used the preset artboard size for an iPhone 12/12 Pro, 390x844 pixels. Name the artboard. I named mine “mobile home.”

Add your design elements.

From the bottom layer to the top layer in my example:

1. Mask Group 1
   This is an image from unsplash.com, masked with a shape that’s the size of the artboard.
2. Here’s a headline
   This is type on top of the image.
3. Button
   This is a button with type in it that reads, fittingly, “Here’s a button.”
4. Header
   This is a black rectangle, which serves as the logo/menu background.
5. Logo
   This is a placeholder logo for that terrific client of yours.
6. Menu button
   This group contains the two lines that make our “hamburger” menu.

Duplicate your home artboard.

Option-drag your artboard to create another artboard, and name it “Mobile menu.” Position the new artboard to the right of the first one, at least 400 pixels away, for reasons that will be evident soon.

Add the mobile menu.

I’ve added a group named “Navigation slider” that contains placeholder menu items numbered 1 through 4, yellow lines separating each menu item for some visual interest, and a semi-transparent black rectangle that covers the homepage image and button.

Modify the lines in the “hamburger” menu.

Keeping their layer position and layer names the same, rotate and resize the “hamburger” menu lines into an X to serve as the “close” button for the menu. XD’s Auto-Animate feature only works between artboards when layers contain the same name and layer/group position between artboards.

Back to the home screen.

Copy the group “Navigation slider” on the “mobile menu” artboard. Select the “mobile home” artboard and paste the group. Make sure it’s in the same position in the layer/group stack as it is on the “mobile menu” artboard.

On the “mobile home” artboard, move the layer group off the artboard to the right-hand side.

Wire it up.

Click on the “prototype” tab at the top of the XD application window. On the “mobile home” artboard, select the “menu button” layer group. On the right side of the screen, click the + next to “interaction” to add a new interaction. Set the “trigger” to “tap.” Set the “type” to “Auto animate.” Set the destination to the “mobile menu” artboard. Set the easing and duration to whatever you like. I’ve selected “ease in and out” and 0.6 seconds. 

Move over to the “mobile menu” artboard to set up the “close” animation in a similar manner. Select the “menu button” layer group. On the right side of the screen, click the + next to “interaction” to add a new interaction. Set the “trigger” to “tap.” Set the “type” to “Auto animate.” Set the destination to the “mobile home” artboard, and whatever easing and timing you desire. You can adjust easing and timing at any point.

Test it out.

Click the “play” button in the top right of the XD application window. A new floating window will open with a preview of your design. Click the “hamburger” menu to test the animation. If it works as expected, click the “close” button to test the menu closing animation. 

Experiment more.

You can take your animations to the next level by positioning different elements further away from your “mobile home” artboard. For example, in my animation below, watch closely and you’ll notice that the semi-transparent black background, the text for the menu items, and the rules separating the menu items move into view at different speeds.

Wrap-up.

I’ve found prototyping and animations in XD to be very intuitive and far easier than I expected. Furthermore, Components in XD (similar to Symbols in Sketch) can help you create a library of reusable elements, which can include different “states” for hovering/toggling. Those different states can also include animation between them, which is great for creating toggle switches, rollovers, dropdown menus, and more. Setting up links between artboards as you’ve just done is a great introduction to XD’s mockup tools that are built right into the application and could be your gateway drug into becoming an XD addict. 

Have any creative uses of animations that you’ve made in XD? Let us know in the comments.