Tutorial

In this video tip, I will guide you through steps to share prototype created using Adobe Xd CC. Besides the ability to share prototype with clients and collaborators, there is an easy solution to update prototype and embed prototype to any web page that supports inline frames.

Video tutorial

Here is my video tutorial with all details how to share prototype from Adobe Xd CC and how to update it as necessary. Along the way, I will explain to you how to embed prototype and what is happening in case you want to update embedded prototype. If you have any question or doubt, please do not hesitate to leave comments.

Transcript

Hi guys, in this tip I will explain to you how to share a link to prototype created in Adobe Xd CC and how to update shared link and embed code.

To share prototypes using the Adobe XD Share Online feature, you must log in with an Adobe account to either the Adobe Creative Cloud desktop application or any other Adobe application.

The starting point is to create a prototype in Adobe Xd CC and to test it. You can do that from Prototype tab using Mobile Preview or Desktop Preview. To share a link to your prototype which will be available online you must create a link inside Xd CC.

To generate link click on Share Online icon to see the pop-up. In the Share Online pop-up dialog, you can give a name to your prototype. There is also an option to add an image to display online or mobile. This icon will appear on a users home screen if the shared URL is added to a mobile home screen. You can also allow or disallow comments.

Lastly, click Create Link button and Xd CC will generate a link and embed code. To share a link to your prototype which will be uploaded in the background, click Copy Link button then paste it into an email, text message or web page.

To embed prototype in any web page that supports inline frames, switch to embed tab then click Copy Code button. Now you can paste copied code to your page.

If you decide to change or modify your prototype there is a quick and easy way to update shared link. I will quickly change the color of my buttons to demonstrate one of the possible changes. After updating prototype click on Share Online in the top right corner then click Share Again. In the next screen click on Update Link. In essence, Xd CC will update prototype while link will remain exactly the same. If you have embedded prototype and updated shared link, embedded prototype will display updated version so you do not need to copy embed code again.

Another option is to generate a brand new link in which case Xd CC will upload new version online and that version will be accessible via the newly generated link. To generate new link click Share Online > Share Again button then on the next screen click New Link button. To share a new version of prototype you must copy the link and to share it.

If you plan to embed new version instead of old version then you must copy the newly created embed code and paste it into your page.

In case that you want to delete some of the previous versions then click Manage Links in Share Online pop-up to open CC Assets > My Assets > Prototypes page. Click on trash icon in the bottom right corner of the prototype which you want to delete and confirm.

Thanks for watching and cheers! If you have any question or doubt please do not hesitate to leave comments on YouTube or on my blog which is DesignEasy.
If you find my tutorials useful, please subscribe to my channel and share with your friends.

Product used in this tutorial
Adobe Xd CC

Reference:
Share designs and prototypes