Artboard Overlays (sidebar / menu / popup) in interactive prototypes
Hi there, currently the only interaction is a page switch with some easing functions, but when you click a button, it would be nice that you van select a artboard that you can use as a "overlay" over another artboard. So that way you can create lightboxes in your protytype.
We’re so excited to announce that overlays are now available in our June release! With this feature, you can set any artboard as the overlay target of another artboard and visually place it in the right place in the viewport. Please do let us know what improvements you’d like to see in this feature as individual tickets in UserVoice – we’re listening!
To learn more about overlays: https://youtu.be/3fWBkV5S6U4
-Elaine
-
Chris commented
Hmmm Never have seen a digital site or app with a menu!!! really strange to make that available. Let's make a menu with all images of every possible outcome. Better to forget the program XD and make it for real to save time.
-
Manuzark commented
Yes! definitely will be need a overlay and popup menu and tools support
-
Rob commented
I would love to be able to define animations and interactions as symbols so I could reuse them / copy paste / etc
-
Ferdi Çıldız commented
Totally need!
-
King commented
I agree with Dawson, the first thing I was trying to do in the demo was make the iOS UI on the top to be persistent whilst the canvas changed underneath. It would also be good to lock the position of menu hamburger icon etc.
-
Charles Plath commented
I agree. This is pretty critical in order to generate dialogs and menus, etc. In other apps we've seen it where, like others said, you would do it in layers but the whole "dialog" could be a container that we would move around, much like how we could move a whole folder of items in Photoshop. Maybe layers/folders is the biggie that helps solve this.
-
Yuri Pessa commented
The ability to layer images in top of each other. Like side menus and pop ups alerts works.
-
Dawson DePretis commented
I think this could apply to so many use cases. Basically the ability to hide/show/animate one or more elements onto the art board instead of linking to an entirely separate board.
This would enable much faster prototyping because it wouldn't require duplicating the entire art board just to add one element (like an overlay).
-
Kaue Lima commented
Examples of good uses are Dialogs, Sidebars, notifications, Toggles (not only an overlay but the ability to toggle visibility of a group depending on the state of the toggle).
-
Anonymous commented
An Overlay animation would be beneficial to show things for example how a menu would work on mobile to overlay on half of the current content.
-
bwm_321 commented
When adding dialogs, context menus, etc. it would be really valuable to not have to duplicate the artboard to show the dialog. Would rather link to menu and show/hide it based on link/button click. Examples of use include modals, menus that slide in from left, droplists, context menus, etc.
-
Tina Milford commented
This is an incredibly useful feature not just for lightbox but also web application features; modals, side panels and navigation features. Also alerts and notifications, hover tooltips and changing states of single components (colors, animations etc) that are specific to certain sections of an app, where changing out the whole page will not be applicable.
-
Anonymous commented
One approach would be to use layers for this purpose. Put transitional elements like menus, overlays, ghost notifications, etc. into layers and then interactively show/hide layers as required. Yes, please give us layers :)
-
Patrick Cartelli commented
We use overlays in a number of ways. They often get used for videos, question feedback, site wide login, etc
-
Christian Reich commented
This feature is 100% required for me to use XD vs something like InVision. If I can't simulate menus or different states, XD is useless, unfortunately. Key uses:
-Menu drop-downs (though, a more elegant solution would be nice)
-Different states or revealed content
-Paired with an on-hover this could be used for a hover state (some of us are stuck in the web world with hover states! :P )
-Toggled content