Create an animated mobile menu in Adobe XD

Purple gradient graphic with blog title and Adobe XD logo
Author
Josh Norman
Josh Norman
Executive Vice President & Creative Director

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.

computer cursor selects menu

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.”

naming the file

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.

mobile home and mobile menu artboards

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.

menu items in navigation slider

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.

menu button lines

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. 

menu button and items

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.

menu button lines add

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.

computer cursor selects menu

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.

© Texas Creative. An Advertising Agency. All rights reserved. Privacy Policy | Login
X