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
-
Edwin Delgado commented
This is specially useful for desktop applications. Not every click goes to another screen. Prompts, confirmations, and even field interactions could greatly benefit from it.
-
Darren Schnare commented
This is a really great feature to have, as so many have pointed out below. This could be implemented as follows:
1) Add a grey "overlay" tab below the blue "home" tab for every Artboard
2) When the overlay tab is clicked it is filled in with green (like the home tab is filled in with blue) to indicate that this artboard is to be treated as an overlay.
3) Overlay artboards are not part of the artboard sequence so transitions in other artboards that have their target set to "Next/Previous Artboard" will never choose an overlay artboard.
4) Since overlay artboards are not part of the artboard sequence, transitions within overlay artboards cannot choose "Next/Previous Artboard" as a target.
5) When an overlay artboard is overlaying another artboard, user interaction should pass through the overlay artboard and onto the artboard underneath if the point of interaction has no element to intercept the event (i.e. same behaviour as the DOM in web browsers and DisplayObject hierarchy in Flash/Flex).
6) When an overlay artboard is toggled back to a normal artboard it is inserted into the artboard sequence using the normal sequencing rules OR based on proximity to other artboards in the sequence.
Artboards that are overlays will have their starting position (and/or other attributes) set to the origin artboard of the transition that uses them. Artboards that are overlays should be able to transition to other artboards that are overlays, thereby producing a stacking overlay affect.
Example:
We have two artboards, A and B and artboard A has a button with the following transition applied.
Target: Artboard B
Segue: Dissolve
Easing: Ease out
Duration: 0.5sIf artboard B is not an overlay then when the button in artboard A is clicked the usual transition occurs; artboard B will dissolve to completely hide artboard A.
If artboard B is set to be an overlay via the overlay tab, then when the button in artboard A is clicked artboard B will dissolve but, artboard A will remain visible where artboard B is transparent.
-
Josh Curtis commented
This is just a much needed feature, especially for communicating system popups. Please make this feature a higher priority. This is just a must have.
-
guigonzalez commented
Peter, yes very similar. Thanks mate!
-
Related to:
* Larger-scale popovers: https://adobexd.uservoice.com/forums/353007/suggestions/12924909-artboard-overlays-sidebar-menu-popup
* Rollovers (a subset of all show/hide interactions): https://adobexd.uservoice.com/forums/353007/suggestions/12941394-tap-hover-effect
* Full rich transition animations: https://adobexd.uservoice.com/forums/353007/suggestions/12869229-animate-individual-elements-separately-custom-animation-microinteractions -
guigonzalez commented
Would be a great feature just set hide to an object in the Artboard and give another object the ability to show the hided object.
Like a User Message, a Popover menu, could be a easier way to create new kinds of interactions in prototypes.
-
Zach Smith commented
I would like to be able to add art boards that just side in and push over the art board you were previously on instead of totally changing what you are looking at (pictured tihe the "main screen" and the "side bar") This way the smaller art board would not tottaly remove the previous one. Also If you could have art bards that could "layer" one another that would be AMAZING. EX. If the art board titled add item could go over the art board titled main screen and blur it when the plus sign was clicked that would be awesome. Finally I want to be able to make art boards that you can scroll down like when you scroll down a list of videos on youtube.
-
itzik commented
if this is what i think it is - using small artboards on top of other artboards then this is a great way to go and this is by far the only way this software will revolutionize the all industry. so simple to implement i think on this platform opening new ability for designers worldwide!!!
hope to get some more votes on this here than mine. otherwise keep working you'll get there -
Kevin Neal commented
I'd like to see accordions, sliders, off-canvas panels, sticky headers/footers
-
Dave commented
Exactly, you may for example have a GEO map with coloured radio buttons pertaining to the state of each location and by simply hovering over a radio butt it would be nice to have the functionality of a small pop-up or link to another smaller sized art-board appear within the same art-board. It would be awesome then! :-)
-
Matthew Frederick commented
Very common on mobile to have a fixed tab/tool/header bar that stays put while things scroll underneath them.
Another key use is error messages, alerts, etc. that need to hover over the background, not animate in a new view.
-
John commented
This would allow you to create a contextual menu in a standalone artboard and use the existing prototype animation transitions to make it appear over your previous artboard or one you choose.
This workflow makes it simple to have multiple views while always calling the same artboard for the contextual menu.
-
Anonymous commented
This has probably been mentioned, but the ability for to hover, or animate on hover would be extremely helpful. I would like to be able to animate a line, shape, or object, when the mouse pointer moves across it.
-
jerz commented
i just started using xd and i came across with this need for lightbox popup.
-
Manuel Ryan Espinosa commented
I think this is a great idea. This would be similar to symbols, however, using prototypes in place of symbols. Nice.
-
EmanueleSabetta commented
Yes, this feature has ben described as "overlays", but it is better described as "prototypes inside prototypes". In other words: the possibility to design an entire prototype flow for a small sub component (i.e. a menu, or a list element, or a badge, a toolbar, a navigation bar, or an header/footer with many states) and then use that prototype as an interactive overlay inside another prototype, like your main app. In this way prototypes would become more than entire apps. They can be used to design many single UI components of the App that can be assembled together as overlays to react indipendently from each other, with their own transitions and interactions, and flow. Also you should be able to link a container prototype transition to a specific state/artboard of the contained prototype. For example: "if the prototype contained inside the overlay area is in the state/artboard n.5, then start container transition to artboard n.11". For example you can design the prototype for an element of a list, and then using a repeater group of those prototypes to make those elements of the list having differents states with transitions (i.e. expand, collapse, selected, etc.). In this way if the prototype of the element reach the "selected" artboard, for example, you can update another prototype elsewere on the app, like the detail or info panel with updated informations about the selected element in the list. All you need is to treat prototypes views as abstract elements to be rendered inside overlays or iframes-like sub-frames areas inside the main prototype.
-
EmanueleSabetta commented
Yes, this feature is better described as "prototypes inside prototypes". In other words: the possibility to design an entire prototype flow for a component (i.e. a menu, or a list element badge) and then use that prototype as an interactive overlay inside another prototype, like your main app. In this way prototypes would become more than just entire apps, but they can be used to design single UI components of the App that can be assembled together as overlays to react indipendently from each other, with their own transitions and interactions. Also you should be able to link a container prototype transition to a specific state/artboard of the contained prototype. For example: "if the prototype contained inside the overlay area is in the state/artboard n.5, then start container transition to artboard n.11". For example you can design the prototype for an element of a list, and then using a repeater group of those prototypes to make those elements of the list having differents states with transitions (i.e. expand, collapse, selected, etc.).
-
Josh Yoshi Mendoza commented
This would be a godsend!
-
Dave Powell commented
Key feature indeed. This as, or in addition to, multi-state objects to support hover and active states.
-
Anonymous commented
This is what I also was looking for on my first prototype with XD: I need to demonstrate to my customers how the menu slides in/up/down over my app
Really needed for prototypes!