Mirroring mobile app
It is super important to live view your design as you work.
Hi guys,
Just wanted to let you know that you can now preview, in real time, your #AdobeXD designs and prototypes, on iOS devices (iPhones and iPads) or Android phones (Android tablet support will land soon). Make changes to your design and see it reflected on all the devices you have connected. Add wires to your prototype and play with it to polish the experience, all within the same workflow.
View all the details here (blog post and video): https://blogs.adobe.com/creativecloud/september-update-of-adobe-experience-design-cc-preview
Please give it a try and let us know what you think.
Be part of XD’s journey on mobile devices, this is just the beginning.
Really looking forward to hearing your feedback!
-
Manuel Ryan Espinosa commented
I think this is a great idea. Personally I have ergonomic issues and using the phone is much easier on the hands than using the mouse with the computer.
-
Sheldonbrax commented
I think this really should be tied together with the Responsive elements request!
-
Katrina Rempel commented
Ok, here's my thoughts on the question posed:
With the example of trying to preview an iPad layout on an iPhone 6… The thing is those 2 sizes are very different and if I needed my design to work on a tablet *and* a smartphone I’d likely have 2 different artboards.
What I see occurring far more often is the following: I will be designing for iPhone 6 and then either myself or a team member will try to preview it on, let’s say, an iPhone 6 Plus or an HTC or another type of smartphone that is a similar size. In this case (which I think will be much more common) I would like my layout to scale to fit the device. This way I can share my link with people who have different types of smart phones, and they won’t need to pan around the screen to see the full layout.
That said, it would be great to have an option to toggle between the two, but I see that as less important functionality.
-
Basil Bhatiya commented
As a mobile app designer, I heavily use the app called LiveView. Its an effective way to see how the design elements look on a given mobile screen.
To answer your question Joan, I would like to see the actual size, not a scale down or up version of the design.
-
BR commented
Came on to request this feature but I can see it's already underway. Do you have a timeline for these apps?
I would add that for me it would be beneficial to be able to store multiple prototypes within the app (not just via cloud or live view). If prototypes could be accessed/ downloaded via cloud as well as locally and then stored on the device itself this would be ideal.
In terms of scaling - my vote would be for the artboard to scale to the device size. Using Pixate I find that I build all of my prototypes for native iPhone 6s+ even though I am previewing on 6s and 6s+. The ratio difference here is negligable.
Viewing an iPad artboard on an iPhone would be all over the place. In this instance I believe the artboard should crop the nearest full screen ration to remain full screen.
-
Apostol Voicu commented
Double tapping to so switch between scale sizes and an indicator of % zoom.
-
Stevo commented
Just make it the same as Adobe Preview CC haha
-
[Deleted User] commented
Yes, super important. DPS folio preview directly on device was very, very useful!
Please add this feature soon. Thanks. -
Adriana Mandjarova commented
I'd prefer to have the actual size (100%) since I will not bother viewing design on a non-targeted device, and if this is the case then panning would be a good way to see whole art board.
Personally, I would avoid scaling since this might result in inaccurate font/button sizes, and the very core of having device preview is to get accurate result. For showcasing on a different device, I would use the web link, which is already offered.
-
Ryan Means commented
I would think both should be supported. By default I would go with 100% and panning, but have the ability to switch to scaling. This would allow for greater review capabilities and easier conceptualization of how your app looks/works on different devices.
The "default" should also be something that can be set in XD. So for those sharing with "novices" they can set the design to scale by default, or for those who only want to see it life size they can set the default to 100%.
-
Adriana Mandjarova commented
Adobe Preview integration with XD
It is super important to have a live view of your design on the device as you work. Currently, Adobe Preview is supported by Photoshop and this is amazingly helpful and saves tones of alternating.
A prototype can be viewed by sharing a link. This however is a too late stage for adjusting the visuals of the mockup
-
Quentin commented
Until XD can do fully responsive designs, I'd actually prefer to either not even bother viewing the design on a non-target device, or just have it be 100%, but pan/zoom capability. Although, inevitably, if XD adds micro interaction/gesture animations down the road, then this becomes a potentially large conflict.
-
Gary Rozanc commented
It should be responsive. If you could setup your grids as percentages, resizing them to fit the size of the device should be possible.
-
Brent Caswell commented
I think the real goal is to be able to make the design responsive rather than deciding whether it should be 100% or zoomed.
-
Kevin Neal commented
It is a tricky one, I think the user should be offered a choice when viewing, say for instance you had designed a website and at that point Xd supported responsive art boards, the user only had an iPad to hand but the need to review how the website looks on a desktop and iPad, they need to be able to select the viewing conditions.
Same is true for other situations, it could default to the target device but offer the option to view on alternative devices with pan and zoom options.
-
Jorge commented
Re: preview on an un-intended targeted device: The artboard to scale down to fit the screen. Panning (at 100%) might imply the design is an intended behavior for novice or folk that are not involved in a particular design or project.
-
Anonymous commented
i would expect it to letterbox,
unless you have the ability create responsive linked artboards
ie one web - one tablet - one mobile and link them in the prototype mode. -
Paul commented
This would be very very helpful. We really need to use prototypes on the device in order to accurately get a feel for the design work and patterns.
-
James commented
Having viewed an XD i-phone 5 prototype on my i-phone 6, I definitely wanted to view it at 100% initially but also on occasion seeing vaguely how it might look if it scaled - reverse pinching to get it to actual i-phone 6 screen size.
As for viewing an i-pad art board on a mobile... Well... I would say, what kind of a dummy would want to do that but for those occasions, perhaps on launch, a message could say: "This prototype is not for this device how would you like to view it? Scaled to fit or 100% and pan.
-
Mario Contreras commented
How to view your prototype on mobile.
Instructions
Open the link that you created for your xd project on your iPhone Launch the Safari browser and navigate to the link given to you by XD to add to your home screen. Tap the Share button on the browser's toolbar — that's the rectangle with an arrow pointing upward.
To install, the mobile version on your iPhone tap the "Add to Home Screen" icon and now it works as a app proto.