Overlay States
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.
Click 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.
-
Anonymous commented
Overlay on overlay would be very useful!
-
Jose Carlos Lopez commented
Component states help a lot with the overlay interactions but it's a partial solution.
I'm able to add interactions among the different states of the component to emulate the wanted behaviour in an overlay but, the ideal solution should be to add the behaviour between an element inside the overlay to the state of the component so I don't have to pass through all the states to display the element I want. - Maybe I'm doing it wrong? -
There is another issue with the approach of states to manage overlay interactions and it's that we can't share the specs for development; XD only exports the default state or the state that is active, not the entire interaction.
Please give us a solution. Thanks
-
Anna commented
I don't think this is working...Or maybe I am misunderstanding it. When I try to overlay a state over a component it just changes the state. It's not overlaying. I'm trying to create a basic dropdown, and was thinking I could Create a default state (which says "Select"), an "Open" state (which shows the options you can choose from), and a state for each option (in which "Select" is replaced with the option the user clicks on. When the dropdown is in any state (Default and each option), if you tap it the "open" state should overlay whatever the originating state was. For example, in the default state, when you tap the dropdown, the "Open" state should show **in addition to** the Default state, not instead. Same with any other state. Say I'm creating a state dropdown. Tap the dropdown, "Open" state shows over the default state. Tap "OH", the main component's state changes to "OH", which replaces "Select" with "OH". Tap the dropdown again, "Open" state shows in addition to the dropdown, which still says "OH".
-
Dennis commented
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.
-
Kevp commented
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.
-
Dennis commented
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 :(
-
Peter commented
Figma can do this. You swap overlays, pretty cool. Shame XD doesn't.
-
hthquan commented
This would be great to have!
-
Angela commented
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.
-
fabler commented
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.
-
krave commented
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)