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
Tapping/clicking image expands for better view with the need to create a new art board just for the image.
This would be really helpful. I assumed because this functionality is such a basic operation us designers use in our UI's that it would have been thought of in the main roll out. This couldn't come soon enough.
Scott Ruth commented
So glad this was started, but kinda surprising that it's been in the works for a year
Jay Sharpe commented
Wow this STILL hasn't happened yet? /smh Impossible to prototype without this basic feature.
Since I can't edit this... here's the initial screen using an artboard as an overlay with the keystone selector included.
You know, I just realized I forgot to add a relative context menu for "Select Keystone"
I blame Friday.
As we say in the trade, the best solutions are often the simple ones. Complexity arises as a result of edge cases. For the moment, let's call advanced keyframe animation an edge case.
I know that actual show/hide/morph/animate/time/keyframe stuff is insanely complicated and it may take a while to get into XD.
This proposal represents a half-step beyond what exists without going all the way down the rabbit hole. It would allow us to do perform richer interactions that combine multiple artboards with into/exit path, yet it doesn't require the XD team to... more or less rebuild an Adobe Flash style editor inside of the app.
Even in this simplified case, animating an artboard and anchoring it to a layer ends up giving us a stupidly long list of points, so I've included the ability to create keystones inside of an artboard. If an overlay isn't keyed to artboard top/bottom/left/right/center then it's usually done as relative, just like CSS. As there won't typically be a lot of relative anchor points, it seems most efficient to make them declarative instead of inclusive.
Basically there are 3 types of interaction: a layer animation, a screen-to-screen transition, or on open external URL.
If layer animation is selected, we need to know what screen we're animating the current artboard into, what it's positioned relative to, an offset value, a background handling (if it isn't a full screen takeover, which wouldn't make sense given the context), and then the usual suspects like how the element appears.
Maybe you've already thought of all this but if not, perhaps it'll give you a midrange feature to aim for. This would dramatically simplify artboard management while also giving me a more natural interaction within a prototype.
What say you, Adobe and community?
Emil Ottersten commented
"Feature-started".. It's quite insane that this hasn't been added yet. The tagline "Go from concept to prototype *faster* with Adobe XD, the *all-in-one UX/UI solution* for designing websites, mobile apps, and more" is just way off as long as simple things like this (and scrollable areas) aren't available. Can someone from Adobe please give us an answer?
Even if they have this feature I can't use XD because it doesn't support scrolling containers
I can't design prototypes without this :( Realy need that feature!
I really need this feature... it's so hard to create prototypes without it.
A UX design tool that doesn't allow us to design the interactions we need is poor UX design!
What is this feature tagged as "feature-started" over a year ago.
Is there really any progress on this? We need this bigly.
Really needed, it makes design process more simple.
Heath McDonald commented
I really want to push our team to move from Sketch + InVision to XD, but this one feature is keeping me from doing this.
Upvoting for more visibility to the Adobe devs - a necessary feature for prototyping!
This so necessary, I will have to go back to Invision
Dominic Barnard commented
Up vote for this feature also. Without this feature Invision has the edge on XD.
This could be implemented by simply allowing to select another Artboard as the current one's background, instead of or additionally to a fill color/gradnient (in Appearance section).