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.
Francis Wu commented
Here are a few ideas, all related to allowing devs better fulfill a designer's vision.
As a developer, I want to be able to see responsive layout rules, so that I may develop a product that behaves exactly as the designer intended when its UI is displayed in screens of different sizes.
As a developer, I want to be able to resize the preview's artboard, so that I may better understand the layout rules in real time.
As a developer, I want to be able to see and navigate the UI's layers, so that I may organize my coded UI elements in similar fashion.
As a developer, I want to be able to easily identify XD components, so that I may also code reusable UI components when appropriate.
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...)