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.

Download the Justinmind plug-in for Adobe XD and follow the steps below to get started.

Setting up your Justinmind plug-in for Adobe XD

  1. Download the plug-in for Adobe XD.
  2. 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.Adobe XD to Justinmind file
  3. 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.
Adobe XD export dialog
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.
XD file exported to Justinmind
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.

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 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 from another .vp
  • 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.Import generated prototype