Importing designs from Adobe XD

One way you can start prototyping in is by importing your Adobe XD designs. Any prototype interactions created in Adobe XD will also be imported, as long as they belong or refer to imported artboards and are supported by Specifically, Adobe XD prototype interactions will be converted to interactions on the respective layers.

To get started, install the Design Plugin for Adobe XD from the Adobe XD plugins menu.

Export from Adobe XD

Export selected artboards from Adobe XD to continue with prototyping in You will be getting a '.protoio' export file. By default selected artboards and their respective layers are exported as images. All layers and groups' hierarchy gets exported just like you set it up in Adobe XD.


The Design Plugin for Adobe XD


Upload the exported file to your project

Simply drag and drop the exported .protoio file on your canvas in the Editor or on the Project Assets side pane. 


Uploading the .protoio file to


Artboards in Adobe XD are transferred over as Screens.


Adobe XD Artboards

mceclip4.png Screens


All your layers and groups' hierarchy are transferred over just as you set it up in Adobe XD. 



Adobe XD Layers

mceclip7.png Layers


Reducing complexity: The '@' symbol

Use the '@' symbol at the start of your group name to export an entire group as a single image. Very handy for transferring fewer, easier to manage images in Choose the relevant option in Advanced Settings in the plugin.


Advanced Settings in the plugin


Adobe XD Layers

     mceclip9.png Layers


Rapid prototyping through 'Export each artboard as a single image'

You can bring Adobe XD artboards in as single images so you can proceed with rapid prototyping. You can add interactivity to your prototypes by using "Interaction area" components and other native components. Any prototyping interactions already in place in Adobe XD will be maintained, transferred as "Interaction area" components in your export. Doing this will result in reduced size of your project and also improved performance. To do this you need to select the relevant option in the plugin Advanced Settings.


Advanced Settings in the plugin



Continue editing in Adobe XD and keep in sync

The easiest way to keep all assets in in sync is to choose to export all artboards in Adobe XD, upload the .protoio file and then click "No thanks" in the relevant modal that pops up.


Modal in upon upload to import artboards as new screens



Also see video: Using the Design Plugin for Adobe XD

Have more questions? Submit a request