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
-
Milad commented
Hi
I have a problem with my overlay function. When I click, drag and release the overlay option, the tap doesnt appear to select over layer. Does anyone know how to fix this? -
Eric Fwu commented
Overlay is a great feature to me in many interaction design. but the only drawback is that it has to be back to previous artboard to have all interactions on the artboard back to normal. For example, I use an overlay to make an ON/OFF button, when I tap the button from ON to OFF status, all the interactions on the artboard are disable. All the interactions become normal after I tap the button back to ON status. This feature limits the overlay's application quite a lot!
-
Noman Qaiser commented
I want my overlay to be of a custom shape, in stead of a rectangle, for eg: i want my overlay to have a rounded radius, because im simulating a popup on a website. Is there any way to do it?
-
Giselle Jimenez commented
I am using this feature and I love it. I work as a Front End UI Developer and we are using the tool for prototyping. I did notice that the dropdown will not allow anything past the breakpoint of the page (horizontally), when in reality a dropdown could potentially require scroll.
-
Arnold commented
I am using this feature, but anyway to attach it to the element or object it's connected to? For example, I wanted to expand a filter section on my design, but when I scroll down the page, then click to expand my element, it loses it's place.
-
Dennis Ferreira commented
In regards to my comment below I think I see the problem. The overlay is in fact positioned correctly but the issue seems to be that item I am attempting to overlay should is abut closer to the fold so once you scroll the overlay displays in the appropriate fixed position but does not take the scrolling into account. This means back to duplicating artboards I guess?
-
Dennis Ferreira commented
So I read a few of the comments here and I don't know if it's just me but my overlays do not display where I position them. The tend to display much lower vertically then I position the horizontal alignment seems correct though? Any ideas?
-
Ori Segal commented
overlays are grate! but i cant stack 2 of them on top of one another, it always closes the first one before opening the other one...
-
Anonymous commented
Thanks for the feature but there is a bug here. the hotspot markings do not work in "overlays"
-
Martin Kleis Sundstrøm commented
Overlays are great! And would be utterly amazing if you could animate between two on-screen positions in the same artboard. That way you can have overlays that slide *almost* off-screen but stay at the edge where they can toggled to slide back in. But that again is almost like toggling different states, which we still sorely need for switches.
-
Richard Bagnall commented
New Overlay feature is great, now I can even have a menu slide in. Would be even better though if the return link could be set to go back to the originator of the overlay link? When I try using one overlay for 3 artboards, it always returns to the first artboard I linked from. Also it seems that if you try to edit the return link symbol (I assume that's what it is), it just disappears?
BTW @Jess, you can make an artboard larger than the viewport so it will scroll and if you want a menu to slide in, just set that in the overlay transition.
-
Heath McDonald commented
I'm so glad this was released this month. I love the ability to create overlays and prototype all in the same app. Up until now XD really wasn't a viable option to replace Sketch + InVision. But now it actually makes more sense for me to keep my CC subscription. I can find PS and AI replacements, but as a UX Designer having all this integrated makes it well worth the subscription price. I can't wait to see the future improvements for XD. Now I just need to see how easy it is to use XD to generate dev resources. That's the other thing I use Sketch for.
-
RS-Bjtwede commented
This is a great feature with lots of potential!
I agree with Jess. Overlays should allow scrolling. Overlays prevent me from scrolling while active. They also appear in the wrong spot if I scroll first and then click the trigger because they are viewport-based.
Another related thought is that it would be nice if I could have multiple overlays simultaneously or at least choose what disables them. Right now it seems to make the screen static until I click anywhere to revert.
One last thought is that the overlay transition should allow something like "Slide Down from Leading Edge". Right now they slide down from the edge of the original artboard. This looks odd for things like dropdown lists as they fly in from off of the screen instead of just below the button. For now I'll just use "Dissolve" or "None".
-
Jose Carlos Lopez commented
Great, I'm so happy to test this new and long-awaited feature
-
Anonymous commented
Happy that Adobe included this feature, it's extremely important in my opinion, but I've had to revert installation because apparently, the new update doesn't work properly in the desktop preview mode, I couldn't see any link working after the installation, anyone has the same problem?
-
Anonymous commented
Thanks adobe!!!
-
Anonymous commented
Great — thank you!
Agree with Jess that the overlays need to be able to be positioned anywhere on the screen, not just in the viewport. Or maybe there is a way to do this and I'm just missing it...
-
Jess commented
SIDE SCROLL items would be super useful as well, and HOVER and CLICK actions
-
Jess commented
Hi would like to be able to move the OVERLAY item anywhere, not just in the viewport. I often have pop ups and such lower on the page, outside of the viewport.
-
Maik commented
Very cool - thank you! Designs become more functional now. In one of the next steps accordions and tabs would be great.