Justinmind’s integration with Photoshop

Justinmind is integrated with photo and graphics editor Photoshop. With this integration, you can generate fully functional and interactive prototypes from your Photoshop files and customize them in Justinmind.

Download the Justinmind plugin for Photoshop and follow the steps below to get started.

Setting up your Justinmind plugin for Photoshop

Download the plugin for Photoshop.
Unzip the file to reveal a folder.
In Photoshop, with the file you’d like to export open, navigate to the File menu, then to Scripts, then click Browse. In the file browser, select the folder from the .zip file, choose the .jsx file inside, and click ‘Open’. Another dialog will appear for you to select the desired output destination for the generated file.You’ll then see the export process in a dialog, which will disappear once the export process is complete. Lastly, a Justinmind-compatible .vp file will be generated.

The generated .vp file will convert all layers from your Photoshop file into individual elements and components in Justinmind. All text from your Photoshop design will be maintained as editable text in Justinmind. All other assets will be converted into .png images.

How to work with your Photoshop file in Justinmind

Open the .vp file in Justinmind and start working.

You’ll see all of the layers from your file listed in the Outline palette and on the Canvas. Click on an element and look to the Properties palette to see the different ways you can further customize your design.

You can now start adding functionality to your prototype, like Links to other screens. Learn more about how to get started with your new Justinmind prototype.

Note: the plugin will generate a Web device prototype. If you’d like to work with a different device type, you will need to manually change it in Justinmind. You can change the device type by selecting the base screen in the Outline palette, and then in Properties palette, under General, choose another device from the dropdown.

Other ways of getting started with your Photoshop file

Open Justinmind, and in the dialog that appears, choose to start from another .vp file. Select the .vp file that was generated using the plugin.
Import the .vp file into another prototype. To do this, open the .vp file you would like to import into, and go to the File menu, select Import, and select Prototype. Choose the generated .vp file to import and discard any unwanted parts of the prototype that were generated, such as Scenarios and Templates. Click “OK” to finish importing.