Responsive preview: automatically display artboard of correct size
Would be great to see a Prototype Preview of the responsive design, how the layout changes, when the window is scaled. If there are different artboards created for the devices, it's great to see how it switches dynamically.
Francis Wu commented
I just created a new feature request along similar lines, but not exactly, and more dev-centric: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/39981817-responsive-layout-rules-and-layer-navigation-for-d
TL:DR; I want to make it easier for designers to share with devs how a design's responsive layout is supposed to work, and to share share with devs what UI components are reusable.
Feel free to upvote and share.
Nathaniel Platts commented
In the Browser - Having responsive breakpoints based on browser width would be a super intuitive feature. A game-changer!
In other words, I have one design in which I have created four variations/artboards based on different widths. Being able to set breakpoints for my artboards within the browser would be just amazing!
When user resizes the artboard in prototype mode, the user will see how the design responds to responsive resizing.
At any point, the user can enter the design mode to update the design outside the fixed master artboard size.
Add media-queries or breakpoints to design different layouts according to the width or if it is vertical or horizontal, for example
It would be great if you could connect the different screen sizes of one artboard (e.g. web, tablet landscape, tablet portrait, mobile, ...) that you can easily switch between the sizes in the preview window.
@adobe take a look how Pixeltogether managed to copy through designs to different viewports. It's a real time saver.
Note: for prototyping fully dynamic, resizable layouts see https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12942171-responsive-artboards-and-adaptive-layout. I think this item is a simpler request to support multiple static-sized artboards (e.g. iPhone porttrait, iPhone landscape, iPad portrait, etc.) and automatically choose the right one for the device/screen size when viewing a prototype.
Love this idea!
(It would be very nice to either link artboards per view – for example artboard per device that are linked together representing the view: mobile view, tablet portrait, tablet, landscape, laptop and desktop in the same document --- OR --- link documents together that has unique device designs (1 doc is mobile, 1 is tablet, 1 is laptop for example) and match artboards within those documents that has the same name – to automatically link those artboards as "responsive"... It depends what is the preferred approach when designing i presume...)