Justinmind’s integration with Adobe XD
Justinmind is integrated with UI/UX design tool Adobe XD. With this integration, you can generate fully functional and interactive prototypes from your Adobe XD files and customize them in Justinmind.
Setting up your Justinmind plug-in for Adobe XD
- Open Adobe XD, look to the main menu to Plugins, then select ‘Discover Plugins’.
- In the dialog that appears, search for ‘Justinmind’ and install the Justinmind for XD plugin.
Alternatively, you can download the plug-in here. Unzip the file to reveal a file called Justinmind.xdx. Double click on the file to install the plugin. This will also launch Adobe XD.
- In Adobe XD, with the file you’d like to export open, navigate to the Plugins menu and select “XD to Justinmind”.
You’ll then see a dialog where you can specify the name and destination of the export. After that, a Justinmind-compatible .vp file will be generated.
The generated .vp file will convert all layers from your Adobe XD file into individual elements and components in Justinmind. All text from your design will be maintained as editable text, and Rectangles and Ellipses will stay as shapes in your Justinmind prototype. All other assets will be converted into .svg images.
How to work with your Adobe XD 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. Click here to learn more about how to get started with your new Justinmind prototype.
Other ways of getting started with your Adobe XD 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.