Display shared prototype in device chrome
Ability to view or record the prototype based on the artboard that was used. Since there's already a list of specific artboards (iphonex, ipad, android etc.).
The idea is when you publish a prototype there would be an option if you want it to be view on a device. Same as when recording it.
Please add this Feature
We also need this as a feature. When it comes to presenting prototypes we need to be able to pass the feeling on that they are using said device rather than a blank rectangle on the screen.
Steven Jenner commented
If a screen was designed at a specific resolution, it would be fantastic to be able to export a screen into a device mock-up.
For example, I design screens to fit into a Galaxy S8+ device. My artboards are 1440x2960 (although any matching ratio should work as well), and then after exporting them into PNGs, I do a 2nd pass where I place those screens into device mock-ups for placing into Powerpoints, websites etc...
It would be a fantastic tool if XD did that for me as an export option! The devices should be exportable with/without screen glint and with/without drop shadow.
That said, if XD was exporting them in a standardized manner, I could always create a post-processing action with Photoshop to add those types of effects myself in swoop.
Also, here is iPhone6/7/8 version: https://codepen.io/mitsuki/pen/jRwWob
Here you are!
Just you can copy the embed code on Share for Review panel, and paste the iframe code. :)
When you share the mockup with someone, just change the codepen view to "Live" and share the url.
Add an option to show mobile device "chrome"simulation around the "web share" preview. So it looks like it's framed by what looks like a mobile device. Similar to how invision does their preview. Only viewable on the desktop views.
Really needed for presentations!!!
Nicole Splater commented
Yeah, like InVision. XD NEEDS this badly. Not sure why they haven't done this? It would be another plus for Adobe compared to Sketch.
Ashley Katz commented
We use InVisionApp for user testing, which allows the user to feel like they are using the correct device by displaying the skin of the device, iphone, andriod, ipad, etc.
This is crucial in our design flow.
Any update on this? This is the only reason I use inVision, for the iPhone overlay.
Evgeny Drokov commented
Yes, please add this feature!
Harun Alikadić commented
To illustrate better what we are asking for here I have made myself kind of a temporary solution:
thank you InvisionApp for skin renderings :)
+1 I need this feature too, please!
attila kb commented
Image of a phone behind the desktop web preview, similar to what sketch has but where we can select type of phone it's previewed on.
Would be nice to show it on android phone since 86% of the population use android. Clients are always asking me why these non iOS specific designs are previewed on iPhone.
Harun Alikadić commented
What is the situation with this feature? Any workaround? Third party app? Plugin?
Hamed Yahyaei commented
This feature is needed for presentations or sharing the XD link and differs from Mirror function. When will it be added to Adobe XD?
I don't understand. I don't have this option. Did you set-up something before that the option can appear ?
In InVision I can choose from several different mobile phones to display my mobile mockups inside. This gives the prototype an autentic look. I think this feature is deeply missed in XD. Showing screens only with no mobile phone is lame. InVision is much better in that respect.
This is a nice feature for my clients. It looks more "wow" and the client directly see for which device the design is! There will be no misunderstandings.
That is great but when I share the link to others to present mockups to out design teams it would be nice if it could display in the device it was designed for, in the public link.