Responsive Prototype (Web)
It would be great to see a responsive preview that would fit to screen for the link generated.
Sandhya
shared this idea
23 comments
-
David
commented
That would be sooooooooo amazing !
-
Gavin Stokes
commented
In case its unclear, and this is as far back as the start of 2019???
Derek Rudel commented · May 7, 2019
Adobe needs to make some big strides in competing with other tools like InVision or this one: https://www.justinmind.com/support/liquid-layouts-and-breakpoints/ which supports exactly what this request is for. I'm beyond surprised this isn't in active development as it would be SO valuable for users that are needing to create responsive designs for multiple devices/breakpoints. -
Sean Taylor-Leech
commented
Ability to demonstrate flex box like reflow would be helpful working with developers but also liberate designers to DIY. I hear Anima and Dogma can do this.
-
Rebecca Rumble
commented
Agreed, I've shown designs to clients and they will say things like the text is too small when really it's because they are viewing it on a smaller screen so are seeing it at a reduced % size. It would be good to share a link that will display an artboard based on their screensize (or even just displayed a warning to say that this artboard was designed for 1336 and your screen is 1024 so it has been reduced in size).
Perhaps a setting in prototype mode would be useful so you can say "on resize" go to this "artboard" instead?
-
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.
-
Anonymous
commented
Having prototypes restricted to canvas size designed to, and not respond to the device previewed on, makes it less than optimal to conduct effective User Testing. Specially when unmoderated. Other prototype tools are responsive to the device being used. Seems logical in todays world with infinite aspect ratios.
I'm a BIG advocate for XD at work, but can not justify the use of an XD prototype for user testing unfortunately.
-
Roy
commented
Similar to the Chrome dev tools, it would be great to have responsive device viewing options toolbar in the Preview window that would allow me to pick or type viewport/device sizes and resolutions in order to automatically resize the viewport to the selected size. See attached image.
At the very least, some indicator text or flyout that shows the active viewport H x W which would change as you resize.
-
Sabin Antony
commented
From the home screen, need to select multiple artboards, there you can give any dropdown or checkboxes to choose 4 or 5 artboards at the same time. After selection file opens with selected artboards.
Once I create one "repeat group" in the first artboard and it will create its "responsive view" automatically in other artboards. Other artboards will show recommended option, as which alignment is fit to that screen.
Requirement:- If I created 4 boxes in one row, this group of 4 automatically show its responsive view in other artboards.
( Tab - 2 box in one row
Mobile - 1 box in one row )If a user wants to change alignment they can choose other options. If they don't want "repeat group" in one specific screen, Either they can choose custom or delete the whole group.
-
Patrick Whittingham
commented
I would like to allow the percentage to the width/height properties (ie, width: 45%). Also, the following from CSS:
max-width, min-width, max-height, min-height.As you can see these properties will give the artboards, elements, and components a more flexible framework. People will be able to see my mockups regardless of which smartphone/tablet they are using.
There are other properties which could be added, I guess you get the picture.
-
Patrick Whittingham
commented
It would be nice to allow the width & height of artboard, objects, images, and components to be set to auto. This would work like CSS so that one can create a site for any phone, tablet or desktop and those items (ie, component) would fill the screen accordingly. Currently, the artboard is width/height are hardcoded and only works for one size (ie, iPhone 6/7/8). A true responsive design would make XD very useful. I can send a mobile portrait (ie, URL) to allow one to see my design regardless if the phone is a iPhone SE, iPhone 10, and any Android vendor.
-
Derek Rudel
commented
Adobe needs to make some big strides in competing with other tools like InVision or this one: https://www.justinmind.com/support/liquid-layouts-and-breakpoints/ which supports exactly what this request is for. I'm beyond surprised this isn't in active development as it would be SO valuable for users that are needing to create responsive designs for multiple devices/breakpoints.
-
Ray Villaraza
commented
Spend all this time making it responsive in Design view, but it's not responsive in Shared view... kind of defeats the purpose in my opinion to have done all the responsive work for yourself and not have anything to show the clients or the developers...
-
Erkan
commented
So there will 3 conflicts. Viewing on web with a desktop machine(Design1).... Viewing on mobile (Design2)....Viewing on XD player (Design3). We can not know which platform will be used when viewing prototype. Fixed Bottom menu development is not a real big issue for Adobe. Thank you very much
-
Erkan
commented
Helle Elaine, what i mean is that just like instagram if you have a fixed bottom menu; the menu should accomodate itself to the browsing area. The bottom fixed menu on XD does not fix itself to the browser but to the bottom of the XD project. So this is a challenging but very important to make it view on mobile.
-
alex
commented
Request preface
Looked through 4 pages (+ i dont know how many others) on "responsive columns" but was unable to find a request that mirrored my own. Also, perhaps I don't fully understand the "responsive resize" feature that currently exists.Problem
If I have two boxes (text or images) next to each other on my desktop artboard. I want to have them stack vertically on a smaller artboard. Currently they are being resized, a.k.a. squished together which works for somethings but not all.So I have two boxes/columns which are both divided into two columns for a price box display. Using the current "responsive resize" feature on a smaller artboard the two boxes are made less wide when I just want them to both be 100% width and stacked on top of each other vertically.
Feature suggestion
Add a media query type feature, after a certain width the boxes no longer resize and instead the second box is pushed below the first box and both are made to be 100% width. -
Derek Rudel
commented
It would be great to be able to scale the browser/preview window to engage with the a responsive web prototype or experience accurate orientations for different devices.
Many of my designs are for websites, and being able to view a fully responsive prototype would be game changing.
Also being able to limit which objects are shown at different break points would be super helpful.
-
Erkan
commented
Thank you all, but when we share it on mobile that time we face missing fonts issues. As far as i see it is not like Flash, embed fonts & go. Maybe you can request a checkbox for us to export fonts as shapes for sharing only. Thanks.
-
Erkan
commented
If you are using android device sharing on web with fixed positioned bottom menu app is impossible. Android nav bar covers the whole bottom menu and it is useless...
-
Blake Barr
commented
XD needs the ability to change artboards between different output models (like Android and iPhones) by selecting a new size and dynamically repositioning and resizing objects, much like InDesign and PowerPoint do.
-
Art Vandelay
commented
When we perform remote user testing with prototypes, we can't know the viewport height of the display of external testers. I therefore need the viewport height to adjust to whichever screen it's being displayed on automatically.
Also, is there a way to implement a normal scrollbar on the right hand side? Now users often can't see that they can scroll down, as there is no scrollbar.
Thank you