Justinmind’s integration with Adobe XD

There are two ways to import your work from Adobe XD to Justinmind.

Copy and Paste SVG code

In order to bring any element, group of elements or artboards from Adobe XD to Justinmind simply select them on Adobe XD and select the right click option ‘Copy SVG code’. Then open Justinmind and select the main menu option ‘Edit – Paste’ to bring all the vector elements with the same structure and layer names as they were in Sketch. You can then select each individual vector element and modify it any way you want.

In a similar way, if you have any vector element in Justinmind created with the ‘Pen tool’, you can bring it to Adobe XD for further editing. Right click on the vector element in Justinmind and select ‘Copy SVG code’, then open Adobe XD and paste. The layer structure of the vector element created in Justinmind is kept in Sketch.

You can go back and forth using Copy and Paste as many times as you need.

Setting up your Justinmind plugin for Adobe XD

Another way to bring Adobe XD designs into Justinmind is by using the Justinmind for XD plugin:

Open Adobe XD, look to the main menu to Plugins, then select ‘Browse Plugins’.
In the window that appears, go to ‘All Plugins’ -> ‘Search all plugins’, search for ‘Justinmind’, and install the Justinmind for 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.
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 Layers 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.

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 Layers palette, and then in Properties palette, under General, choose another device from the dropdown.

Adding interactions to Adobe XD designs

Justinmind is specially powerful to make designs interactive and simulate web and mobile apps as realistic as the user needs to. Once you bring a design from Adobe XD to Justinmind you can right away select any layer and add events to it.

If what you want is to simulate responsive elements, meaning, having one of the vector elements to fit the width of the entire screen for example, you’ll need to right click on the vector element and select ‘Path – Turn into – image’ first. Then, in the Properties palette, you’ll be able to set the size properties as percentages.

Making Adobe XD input forms interactive

An easy way to take advantage of the integration between Justinmind and Adobe XD is for making already designed input forms interactive for testing purposes. Bring your designed input form from Adobe XD using the ‘Copy SVG code’. Then paste it in Justinmind and right click to the design of an input field. Select the option ‘Path – Turn into – Input Text field’. Launch the simulation and see how that design now works as a real input field but keeping the look and feel. You can turn any vector element in any of the pre defined input form fields in Justinmind.