Request details

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.

170 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Steven Jenner shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

20 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • Lee Ann Smyth commented  ·   ·  Flag as inappropriate

    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.

  • Ian Armstrong commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    Figma can do this. You swap overlays, pretty cool. Shame XD doesn't.

  • Angela commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    Yes please. Trying to add an accordion nav and it's not working with the current set of tools.

  • krave commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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)

  • Hyde commented  ·   ·  Flag as inappropriate

    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.

    Example:
    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.

  • Anonymous commented  ·   ·  Flag as inappropriate

    Hi Daniel!

    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!

  • Anonymous commented  ·   ·  Flag as inappropriate

    I can´t move the second overlay to the right position :( help!? Se attached file :)

  • Anonymous commented  ·   ·  Flag as inappropriate

    I can´t move the second overlay to the right position :( help!? Se attached file :)

  • Dave Adams commented  ·   ·  Flag as inappropriate

    The new overlay feature has very limited interaction, namely open overlay, click link, dismiss overlay.This is a HUGE improvement...

    HOWEVER, I need the ability to update multiple elements (fill in text areas, change the state of elements, or change things in some material way) and then dismiss it after that granular activity has taken place, usually with a "save" "accept" or "done" button or command. In other words, multiple "states" for overlay interactions or the ability to make several changes within the overlay prior to dismissing it, followed by a transition "out" that's similar to the transition "in".

Feedback and Knowledge Base