Import from Photoshop

Photoshop

First, download the Proto.io Design plugin for Photoshop

After downloading the Proto.io Design Plugin, extract it and copy the "Proto.io Export" folder in the Photoshop Generator folder. Restart Photoshop.

To access Photoshop's Generator folder on Mac: Applications > Adobe Photoshop CC 2015 > Plug-ins > Generator

To access Photoshop's Generator folder on Windows: Program Files > Adobe > Adobe Photoshop CC 2015 > Plug-ins > Generator

 

Export from Photoshop

Export your entire project, selected artboards or individual layers from Photoshop.

Don't have a Photoshop file handy? Download our own sample Photoshop PSD

Upload the exported file to your Proto.io project.

Simply drag and drop the exported .protoio file on your canvas or on the quick assets side pane.

 
NOTES

Artboards in Photoshop are transferred over as Proto.io Screens

 

Photoshop Artboards

 

Proto.io Screens

                               

Your items and groups hierarchy is transferred just like you set it up in Photoshop

 

Photoshop Layers

 

Proto.io Layers

 

TIPS AND TRICKS

For older versions of Photoshop CC: Use the '+' symbol to create Artboards

If you are running a version of Photoshop CC that does not support Artboards, you can use the '+' symbol as a prefix of group names to convert an entire group to a single Artboard.

Reducing complexity with 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.

 

 

Update individual assets: The 'Export Selected Layers as Assets'

If you edit one or more assets in Photoshop after you have imported them in Proto.io, you can select to export individual assets using the third Proto.io Plugin menu option.

Exporting your assets this way will preserve their unique file names as used during the first export and will allow you to drag and drop them to replace them in Proto.io.

 

 

Continue editing in Photoshop 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 Photoshop, upload the protoio file and then just click Cancel in the modal window that pops up.

 

Related tip: If you have created new artboards in Photoshop and would like to transfer them to Proto.io, what you need to do is select them from Photoshop and then choose "Export selected artboards" from the plugin menu. This will create a protoio file containing only the new artboards.



Also, see video Using the Proto.io Design Plugin for Photoshop.

Have more questions? Submit a request