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.
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.