New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 02 : Prototype mode

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1351 ideas
  • 02 : Prototype mode 368 ideas
  • 03: Share mode 47 ideas
  • 04 : Sharing on the web 212 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 37 ideas
  • 07 : Integration with other tools 120 ideas
  • 08 : Mobile (iOS) 24 ideas
  • 09 : Mobile (Android) 18 ideas
  • 10: Developer Handoff 137 ideas
  • 11: Plugins 134 ideas
  • Other 102 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,833 ideas

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.

  •  
    link.png 2402 KB
  •  
    Set_Keystone_(named_animation_anchor).png 29 KB
  •  
    Anchor_Types.png 32 KB
  •  
    Interaction_Types.png 32 KB
  •  
    Layer_Animation_Setup.png 32 KB
  •  
    Example.png 1373 KB
  •  
    Untitled-1.jpg 352 KB
  •  
    Screen_Shot_2016-07-10_at_6.58.15_PM.png 138 KB
  •  
    Captura_de_Tela_2016-03-15_às_14.49.20.png 1458 KB
  •  
    Home___Almeida2.png 77 KB
  •  
    Home___Almeida.png 343 KB
2,235 votes

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Bart van Lieshout shared this idea  ·  Mar 14, 2016  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
feature-completed  ·  AdminElaine (Adobe) (Product Manager, Adobe) responded  ·  Jun 19, 2018

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

-Elaine

Show previous admin responses (5)
feature-started  ·  AdminPeter Flynn (Software Engineer, Adobe) responded  ·  Sep 23, 2016
feature-in-the-backlog  ·  AdminJoan Lafferty (XD Product Manager, Adobe) responded  ·  Jul 28, 2016
feature-under-review  ·  Demian Borba responded  ·  Jul 11, 2016
feature-needs-more-info  ·  Demian Borba responded  ·  Jul 11, 2016
feature-under-review  ·  AdminJoan Lafferty (XD Product Manager, Adobe) responded  ·  Mar 14, 2016

We definitely plan on more support for changing the state of particular objects (not just artboards). If you could tell us more about your use cases for overlays, we’ll be sure to take the use cases into account as we design our solution for microinteractions.

Tweet
  • Remove
Attach a File

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Edwin Delgado commented  ·  July 27, 2016 1:47 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is specially useful for desktop applications. Not every click goes to another screen. Prompts, confirmations, and even field interactions could greatly benefit from it.

    Submitting...
  • Darren Schnare commented  ·  July 27, 2016 8:09 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is a really great feature to have, as so many have pointed out below. This could be implemented as follows:

    1) Add a grey "overlay" tab below the blue "home" tab for every Artboard

    2) When the overlay tab is clicked it is filled in with green (like the home tab is filled in with blue) to indicate that this artboard is to be treated as an overlay.

    3) Overlay artboards are not part of the artboard sequence so transitions in other artboards that have their target set to "Next/Previous Artboard" will never choose an overlay artboard.

    4) Since overlay artboards are not part of the artboard sequence, transitions within overlay artboards cannot choose "Next/Previous Artboard" as a target.

    5) When an overlay artboard is overlaying another artboard, user interaction should pass through the overlay artboard and onto the artboard underneath if the point of interaction has no element to intercept the event (i.e. same behaviour as the DOM in web browsers and DisplayObject hierarchy in Flash/Flex).

    6) When an overlay artboard is toggled back to a normal artboard it is inserted into the artboard sequence using the normal sequencing rules OR based on proximity to other artboards in the sequence.

    Artboards that are overlays will have their starting position (and/or other attributes) set to the origin artboard of the transition that uses them. Artboards that are overlays should be able to transition to other artboards that are overlays, thereby producing a stacking overlay affect.

    Example:

    We have two artboards, A and B and artboard A has a button with the following transition applied.

    Target: Artboard B
    Segue: Dissolve
    Easing: Ease out
    Duration: 0.5s

    If artboard B is not an overlay then when the button in artboard A is clicked the usual transition occurs; artboard B will dissolve to completely hide artboard A.

    If artboard B is set to be an overlay via the overlay tab, then when the button in artboard A is clicked artboard B will dissolve but, artboard A will remain visible where artboard B is transparent.

    Submitting...
  • Josh Curtis commented  ·  July 21, 2016 5:12 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is just a much needed feature, especially for communicating system popups. Please make this feature a higher priority. This is just a must have.

    Submitting...
  • guigonzalez commented  ·  July 20, 2016 2:51 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Peter, yes very similar. Thanks mate!

    Submitting...
  • AdminPeter Flynn (Software Engineer, Adobe) commented  ·  July 20, 2016 1:16 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Related to:

    * Larger-scale popovers: https://adobexd.uservoice.com/forums/353007/suggestions/12924909-artboard-overlays-sidebar-menu-popup
    * Rollovers (a subset of all show/hide interactions): https://adobexd.uservoice.com/forums/353007/suggestions/12941394-tap-hover-effect
    * Full rich transition animations: https://adobexd.uservoice.com/forums/353007/suggestions/12869229-animate-individual-elements-separately-custom-animation-microinteractions

    Submitting...
  • guigonzalez commented  ·  July 20, 2016 9:13 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Would be a great feature just set hide to an object in the Artboard and give another object the ability to show the hided object.

    Like a User Message, a Popover menu, could be a easier way to create new kinds of interactions in prototypes.

    Submitting...
  • Zach Smith commented  ·  July 10, 2016 5:01 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I would like to be able to add art boards that just side in and push over the art board you were previously on instead of totally changing what you are looking at (pictured tihe the "main screen" and the "side bar") This way the smaller art board would not tottaly remove the previous one. Also If you could have art bards that could "layer" one another that would be AMAZING. EX. If the art board titled add item could go over the art board titled main screen and blur it when the plus sign was clicked that would be awesome. Finally I want to be able to make art boards that you can scroll down like when you scroll down a list of videos on youtube.

    Submitting...
  • itzik commented  ·  June 23, 2016 10:13 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    if this is what i think it is - using small artboards on top of other artboards then this is a great way to go and this is by far the only way this software will revolutionize the all industry. so simple to implement i think on this platform opening new ability for designers worldwide!!!
    hope to get some more votes on this here than mine. otherwise keep working you'll get there

    Submitting...
  • Kevin Neal commented  ·  June 15, 2016 2:23 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I'd like to see accordions, sliders, off-canvas panels, sticky headers/footers

    Submitting...
  • Dave commented  ·  June 6, 2016 6:59 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Exactly, you may for example have a GEO map with coloured radio buttons pertaining to the state of each location and by simply hovering over a radio butt it would be nice to have the functionality of a small pop-up or link to another smaller sized art-board appear within the same art-board. It would be awesome then! :-)

    Submitting...
  • Matthew Frederick commented  ·  May 27, 2016 12:57 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Very common on mobile to have a fixed tab/tool/header bar that stays put while things scroll underneath them.

    Another key use is error messages, alerts, etc. that need to hover over the background, not animate in a new view.

    Submitting...
  • John commented  ·  May 26, 2016 11:42 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This would allow you to create a contextual menu in a standalone artboard and use the existing prototype animation transitions to make it appear over your previous artboard or one you choose.

    This workflow makes it simple to have multiple views while always calling the same artboard for the contextual menu.

    Submitting...
  • Anonymous commented  ·  May 26, 2016 9:31 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This has probably been mentioned, but the ability for to hover, or animate on hover would be extremely helpful. I would like to be able to animate a line, shape, or object, when the mouse pointer moves across it.

    Submitting...
  • jerz commented  ·  May 13, 2016 5:27 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    i just started using xd and i came across with this need for lightbox popup.

    Submitting...
  • Manuel Ryan Espinosa commented  ·  April 18, 2016 8:42 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I think this is a great idea. This would be similar to symbols, however, using prototypes in place of symbols. Nice.

    Submitting...
  • EmanueleSabetta commented  ·  April 18, 2016 4:23 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes, this feature has ben described as "overlays", but it is better described as "prototypes inside prototypes". In other words: the possibility to design an entire prototype flow for a small sub component (i.e. a menu, or a list element, or a badge, a toolbar, a navigation bar, or an header/footer with many states) and then use that prototype as an interactive overlay inside another prototype, like your main app. In this way prototypes would become more than entire apps. They can be used to design many single UI components of the App that can be assembled together as overlays to react indipendently from each other, with their own transitions and interactions, and flow. Also you should be able to link a container prototype transition to a specific state/artboard of the contained prototype. For example: "if the prototype contained inside the overlay area is in the state/artboard n.5, then start container transition to artboard n.11". For example you can design the prototype for an element of a list, and then using a repeater group of those prototypes to make those elements of the list having differents states with transitions (i.e. expand, collapse, selected, etc.). In this way if the prototype of the element reach the "selected" artboard, for example, you can update another prototype elsewere on the app, like the detail or info panel with updated informations about the selected element in the list. All you need is to treat prototypes views as abstract elements to be rendered inside overlays or iframes-like sub-frames areas inside the main prototype.

    Submitting...
  • EmanueleSabetta commented  ·  April 18, 2016 4:11 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Yes, this feature is better described as "prototypes inside prototypes". In other words: the possibility to design an entire prototype flow for a component (i.e. a menu, or a list element badge) and then use that prototype as an interactive overlay inside another prototype, like your main app. In this way prototypes would become more than just entire apps, but they can be used to design single UI components of the App that can be assembled together as overlays to react indipendently from each other, with their own transitions and interactions. Also you should be able to link a container prototype transition to a specific state/artboard of the contained prototype. For example: "if the prototype contained inside the overlay area is in the state/artboard n.5, then start container transition to artboard n.11". For example you can design the prototype for an element of a list, and then using a repeater group of those prototypes to make those elements of the list having differents states with transitions (i.e. expand, collapse, selected, etc.).

    Submitting...
  • Josh Yoshi Mendoza commented  ·  April 13, 2016 6:44 PM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This would be a godsend!

    Submitting...
  • Dave Powell commented  ·  April 13, 2016 11:27 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Key feature indeed. This as, or in addition to, multi-state objects to support hover and active states.

    Submitting...
  • Anonymous commented  ·  April 13, 2016 7:00 AM  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is what I also was looking for on my first prototype with XD: I need to demonstrate to my customers how the menu slides in/up/down over my app
    Really needed for prototypes!

    Submitting...
← Previous 1 2 … 5 6 7 8 9 Next →

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy