Options for viewport vs fixed overlay
Be able to choose between an overlay that appears over the viewport or an overlay that is fixed to a specific position within the artboard. This way we can account for two types of overlays:
1. Overlays that are persistent like menu navigations
2. Overlays that are situational like dropdowns within a form
This particular feature request was filed before we had robust states support, which enables you to create elements that fix to specific content, like flyouts, dropdowns, etc. If you’re still interested in this feature, please do file again with some examples of what you’d like to do with overlays that you don’t want to use component states for. Thanks! https://www.adobe.com/products/xd/learn/design-systems/components/make-menus-components-with-nested-hover-states.html
John L commented
Agreed. We need an option to attach overlays relative to the object triggering them, not just relative to the artboard. Adobe has this been reviewed / is it being considered?
Yes, can't design dropdown for a website. This is because XD was made for Mobile app design in mind but this is the kind of feature that MUST be taken into account to improve this software and compete with other tools !
There are currently a number of requests related to disfunction of the overlay feature. Could we somehow amalgamate all of these to increase the severity of the issue (add up all the votes)?
This is a crucial component of prototyping. Please get this feature added asap. I am back to using PDFs to demonstrate my designs, UGH!
Hugo Oliveira commented
People i found a way to overcome this problem for the moment:
1st - You only need to resize your normal page according to the one with the Overlay;
2nd - Now you can change the position of your overlay item... after you will need to resize it again to height you want to;
This work fine for me
Scott Moore commented
Fixing this error in design is critical to making overlays useable! Please consider prioritizing this, as without it we're forced to use other design solutions and can't move our workflow into XD.
Filip Raušlo commented
Same problem, please fix this!
Lennart R commented
I'm prototyping a rather complex website for user testing, and I could really use this feature!
Luis Pena commented
HOOOOOLY! Who said "I think it would be great to not let people use an overlay below the fold."? Please this is 100% necessary!
This 100%. Most webpages and mobile applications involve scrolling action in some way, shape, or form. I would be interested to know whether a possible solution for overlays and other actions below the existing viewport might be the ability to set multiple viewports and record specified actions within each viewport?
I've created an overlay item that I want to place below the viewport fold on a scrolling page. I can't move the green overlay area below the initial viewport though. Please fix!
When I create a overlay for my page I cannot move the image passed the dotted line. which show the page area. if I move the pages dotted line it then works but the page is mucked up and you get a black boarder on either side of the page when you preview the page
I think I have the same problem as Jonathan. I have a scrollable view and I want to add a pop up menu on an item that appears when I scroll but when I got to prototype and try to create a link I am not able to place an overlay below the viewport margin.
Andy Dowse commented
I agree, being able to use overlays below the viewport height is a must. Adjusting the viewport height means the previews don't look right. Great app though.
Jonathan Willmann commented
It's not possible to place an overlay outside the viewport. Please fix this.
Katie Carlton commented
This would help out a lot for specific sections of a board where an overlay would occur such as on an art board that is 2x as long as the max viewport height. Overlays can only work in the viewport, but it would cut back on extra boards if an overlay can work outside of the viewport (of the top of the page).
I was really excited about overlays. The first one I tried to make was a drop-down menu on a sorting bar... below the page fold. It's unfortunate that this is "the intended function." I imagine that most users that aren't only making mobile apps will find this same issue rather early on and consider it a bug or a limitation of a new feature. At this stage, it feels like it was never tested with an end user. So, I'll keep my fingers crossed we get something more inline with anchored overlays. I love what the team is doing, I just wish features were developing a little faster to finally bring XD on par with other offerings.
Yes! That would be great!
Romain Séchan commented
For desktop apps, it's really commun to have Selects elements below the fold.
Overlays would be really really useful for that. But for some reasons, the overlay gets stuck to the bottom of the viewport while trying to position it below.
So that I cannot use overlays in my scrollable artboards, and make them pop pop from anywhere on the page (of course, by preserving scroll position)
Hope this will be part of a release soon!