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.
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.
|
Adobe XD Artboards |
Proto.io Screens |
All your layers and groups' hierarchy are transferred over just as you set it up in Adobe XD.
|
Adobe XD Layers |
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.
Advanced Settings in the plugin
|
Adobe XD Layers |
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.
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.
Modal in Proto.io upon upload to import artboards as new screens
Also see video: Using the Proto.io Design Plugin for Adobe XD.