I would like the ability to move an overlay through it's own transitions without impacting the underlying area.
For example, let's say you have a button that says Help.
Overlay slides in with message box, asks a question.
User clicks Yes. Msgbox transitions to a new box, but underlying background (not part of the transition) remains.
I have a problem like this where I have a drawer a user can expand over the contents to activate slides and switches. Problem is, once you start trying to use that toolbox, the background is lost.
Overlays seem to only be usable in their current form that once you interact with the object it navigates you to somewhere totally different or back to where you came from.
We introduced the concept of component states, which can be used with overlays to enable the type of interaction you’re looking for. Definitely check it out on letsxd.com, and please feel free to file a separate ticket if you still need overlay states with the new functionality.
Hey love the overlay states, yet I'm missing the control to use this as a smart tool. What I mean is that it takes way to much effort to manualy change everything troughout the states when u have tot change something.
Lets say I have a button with states and my stakeholder wants the button to be bigger, I have to change it for each state and it will break some masked object placements when I do, because they are pinpointed from the starting X-Y location. For me it would be best if I can make an button which we can use anywhere as the button including the states will scale propperly.
Another request would be to be able to make it some sort of control which I can re-use. Lets say I got a movie posters banner list with an hover state to increase the width and an onlcick state that will make the poster full-width. I would love to be able to reuse that for all the posters I place on the screen. So the same effects, but with different background-images (before, hover, full-width). Would be amazing as we can just make some nice premade state effects, we can re-use. Lets say make an slider 1 time and than be able to fill it up with new content withoud breaking the effects.
Because right now when i duplicate an effect (Stated object) and change the pictures in the main state. I have to fix alot of issues in all other states. And when I hover it shows the picture of the main component, and not the replaced picture of the current compontent main state. LOTS LOTS of work and LOW re-use as things brake fast.
Eric Forest commented
I would also like to request this feature. My use case was to make a paper doll type of experience.
I wanted one overlay for a hat, one for a top, and one for a bottom. I wanted to be able to press < and > buttons for each clothing layer to scroll through them and mix/match clothing.
Rich Matthews commented
This is an essential feature, overlaying components to show interactions is essential to ensure good prototypes for engineers. If we can't do this, it leaves it up to the engineer to decide the interaction nullifying one of the major draws of having UI/UX design team member(s)
Igor Mikelic commented
A very very useful function that simplifies prototyping multiple times. Figma already have it it's called swapped overlays https://youtu.be/t82XRda5DnY?t=470
Lee Ann Smyth commented
Me too. I need to show how a survey would work with the user being able to select multiple choice answers for more than one question without flipping between screens.
How frustrating, seems like basic overlay functionality.
Included simple usecase. Tabulated sidebar.
Ian Armstrong commented
It made me irrationally angry when this didn't work. With all the new updates recently I just assumed this would work.
Now I need to consider moving the whole prototype back into ProtoPie or Framer again. Ugh.
Design at the speed of thought guys, like your motto. Help me out here.
Leo M commented
An interactive state of an overlay (object) can be an additional art-board, interactively working with an initial overlay (an artboard used as 1st overlay). Interactions among multiple states of an overplayed art-board can utilize available animation-transitions.
There is a real need for functional overlays!
For example I open an overlay artboard side panel in which I want to be able to interact wihtoud closing. (transition trough the same sizes artboards) (for example toggle an option or drag an item).
Solution: Give 3 options. 1 is close overlay on next interaction (like now) 2 is add interaction functionality where you can set an button as the close overlay interaction. 3. Add option to close overlay when clicking outside the entire overlay (thus when interactions stay within the overlay arboard size, it will not close the first set overlay! This enables sized overlays stacking posability)
As right now I need to make a sidepanel as an overlay where I want to try to get some interactions as overlays on top. Such as clicking on the chart within the side panel overlay, which will transition the overlay to a new same sized artboard. OR maybe even open another overlay so that I can have multiple overlay interactions within the first one.
Right now any interaction will close the first overlay right away :(
Figma can do this. You swap overlays, pretty cool. Shame XD doesn't.
This would be great to have!
Would love to have an overlay that could contains multiple artboards to move between before returning to the main content that houses the overlay itself.
Same. Creating menus with submenus etc. would require much less effort, if overlays could cascade, expand or replace themselves without switching back to the base artboard.
Martin Sarna commented
Yes please. Trying to add an accordion nav and it's not working with the current set of tools.
Mike M commented
the overlay only displays in the viewport area.
I would like to have a feature that after user clicking a button, fade-in mask appears to cover the whole screen and an overlay keyboard slides up. It seems common on ios devices when you want to do some searching.
It requires xd to have abilities to define several 'next-effect' on one button.
Kaue Lima commented
I have the same problem! The issue for me was resolved changing the second artboard height to a smaller one (my design allowed me to have a smaller artboard but I usually have all by the same size so I can better fit them into each other)
Stefanija Naskova commented
also I have this bug, I can't use this feature....
It would be helpful if the overlays had the option to specify which transition they have for when they appear and which one for when they dissapear.
I have a side navigation bar which slides from the right when I click it, but in there I have different buttons which expand down. Since there are no nested overlays I choose to create different art boards for each of the ways the navigation bar can be displayed. The problem is that since the transition of the navbar is slide in, when it transitions from the default navbar to one of the expanded ones it slides out before displaying the next navbar.
I would be able to fix this if I choose slide right as the in transition of the navigation bar and "none" as the out transition, that way it would just disappear and display the next overlay without letting know that they are not the same instance.
I hope I was able to explain my issue and proposed solution.
Thank you for the help, it worked to check the veiwports. Now i have a second problem. After being done choosing in the second overlay/dropdown i wish to come to another background picture that shows my selections and this does not work... I gues i am suposed to use the small, bended arrow in the last overlay to chose another artboard than the previous but this does not work :/
Thank you again!