Design reusable image and menu overlays for your mobile app.
Start from scratch, or download practice files [https://adobe.ly/2UOw4Ik] for a head start. Steps below.
Prep your project:
1. Open an .xd document, or use ours (make-popup-overlay_start.xd).
2. Duplicate the artboard: Hold the option key as you drag the title of the iPhone artboard to create a duplicate.
3. Hide mobile app hotspots: Shift+click each of the dots on the main image on the first iPhone artboard. Then, move the Opacity slider in the Properties Inspector to 0%. Click the info icon on the new artboard and reduce its Opacity to 0% as well.
Wire the mobile menu overlay:
1. Click Prototype at the top to enter prototype mode.
2. Click the hamburger menu icon on the first iPhone artboard. Drag a wire from the blue arrow to the Menu artboard.
3. Choose Overlay from the Action drop down. From the Animation drop down, choose the way you want the menu to transition over the screen when the user taps the menu icon. We chose to have it slide right.
4. Drag a wire from the hamburger icon on the second iPhone artboard to the Menu artboard. Notice how Adobe XD remembers your most recent settings. Click away from the Trigger pop-up window to close it.
Wire the image pop-up overlay:
1. Drag a wire from one of the dots on the second iPhone artboard to the Product overlay artboard.
2. Keep Overlay as the Action and set your preferred Animation. We chose Dissolve for this transition.
3. Click the green circle at the center of the overlay indicator and drag to position it.
4. Click the info icon on the first iPhone artboard and drag a wire to the second one. Change the Action to Auto-Animate or Transition.
Test your prototype:
1. Click Desktop Preview (the Play icon) at the top right.
2. Click the hamburger icon to confirm the menu slides in. Click it again to hide the overlay menu.
3. Click the info icon.
4. Click a dot on the main image to display the product description.
That’s it!
To learn, more visit our Adobe XD CC Tutorials page: https://adobe.ly/2UXPESo
Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1
LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/
Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.