Articles, Blog

Snackables: Overlays in Adobe XD

November 1, 2019


No one likes an overcrowded canvas. Overlays in Adobe XD lets you use elements like keyboards, modals or menus on multiple artboards while saving precious space. Say you’re working on a mobile app which contains a slide-in menu. You may want users who are testing this app to be able to access the menu no matter which artboard they’re on. But you certainly don’t want to create separate artboards for each instance. Instead, you’ll want to place the menu on its own artboard, which can then be resized to hide any empty space if you wish. Next, hop into prototype mode and select an element on one of your artboards Drag the handle to the newly created menu, choose Tap for the trigger, and then Overlay for the action. This will not only let you choose how it slides into the screen, but also where it lands. Now that one is set up, you can repeat the process for all of your other artboards linking to the same menu. And now when you preview your prototype on your desktop or mobile device, you can access that menu no matter which screen you’re on and that’s your bite-sized look at overlays in Adobe XD.

3 Comments

  • Reply Aniket Joshi March 28, 2019 at 3:14 pm

    Cool

  • Reply 69mile April 1, 2019 at 7:20 am

    Genius !

  • Reply J. May 30, 2019 at 4:42 am

    Very timely. Thanks for sharing. Loving all the vids. Just switched over to XD and these are a big help.

  • Leave a Reply