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 plugin for Adobe XD

Click here to download the plugin. This will also launch Adobe XD and the plugin will be installed automatically.

Alternatively, you can:

  1. Open Adobe XD, look to the main menu to Plugins, then select ‘Discover Plugins’.
  2. In the dialog that appears, search for ‘Justinmind’ and install the Justinmind for XD plugin.XD plugin

Once the plugin is installed, open the file you’d like to export. Then, navigate to the Plugins menu and select “XD to Justinmind”.

You’ll see a dialog where you can specify the name and destination of the export. After that, the plugin will generate a Justinmind-compatible .vp file.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