Import from Adobe XD

One way you can start prototyping in Proto.io 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 Proto.io. Specifically, Adobe XD prototype interactions will be converted to Proto.io interactions on the respective layers.

To get started, install the Proto.io 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 Proto.io. 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.

mceclip0.png

The Proto.io Design Plugin for Adobe XD

 

Upload the exported file to your Proto.io project

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

 

Uploading the .protoio file to Proto.io

 

Artboards in Adobe XD are transferred over as Proto.io Screens.

mceclip5.png

Adobe XD Artboards

mceclip4.png

Proto.io Screens

  

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

 

mceclip6.png

Adobe XD Layers

mceclip7.png 

Proto.io Layers

 

TIPS AND TRICKS
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 Proto.io. Choose the relevant option in Advanced Settings in the plugin.

mceclip3.png

Advanced Settings in the plugin

mceclip8.png

Adobe XD Layers

     mceclip9.png

Proto.io Layers

 

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

You can bring Adobe XD artboards in Proto.io as single images so you can proceed with rapid prototyping. You can add interactivity to your prototypes by using Proto.io "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 Proto.io project and also improved performance. To do this you need to select the relevant option in the plugin Advanced Settings.

mceclip12.png

Advanced Settings in the plugin

 

 

Continue editing in Adobe XD and keep Proto.io in sync

The easiest way to keep all assets in Proto.io 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.

mceclip0.png

Modal in Proto.io upon upload to import artboards as new screens

 

 

Also see video: Using the Proto.io Design Plugin for Adobe XD

Have more questions? Submit a request