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.

120 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)

    We’ll send you updates on this idea

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

    15 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • 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