Justinmind’s integration with Sketch

Justinmind is integrated with vector graphics editor and design tool Sketch. With this integration, you can create fully-functional, interactive prototypes from your Sketch artboards and customize them in Justinmind.justinmind sketch download plug in
Download the Justinmind plug-in for Sketch here and follow the steps below to get started.

Setting up your Justinmind plug-in for Sketch

To start using the Justinmind plug-in for Sketch:

  1. Download the plug-in.justinmind sketch installation
  2. Once downloaded, unzip and double-click the “.sketchplugin” file to install.

    Note that you will need a working Sketch account and Sketch downloaded on your computer to make use of this integration.sketch plug in install
  3. To get started with the Justinmind plug-in in Sketch, open the Sketch program and go to the Plugins menu option in the main toolbar. Select the “Justinmind” option and choose from the following options:
    • Export artboards layers – select to work on artboards with separate layers (each Sketch artboard will be exported as a separate screen, and each layer will also be exported individually). You can choose to export all artboards or select them individually
    • Export artboards as images – select to work on your artboards in Justinmind as a single layer. This option works best when you’ve completed the visual design stage and only want to add functionality to your design in Justinmindexport artboards

Export artboards layers

If you want to export artboards as layers:

  1. Click the “Export artboards layers” option:export artboards layers
  2. The following dialog will appear:export artboards layers dialog
    1. Select an individual artboard to export
    2. Check “Export all” to export all artboards
    3. Choose a prototype device to export your artboards to. Portrait and landscape options are also available for mobile and tablet devices.
    4. Check to export text layers as images
    5. Check to optimize exports for high quality retina screens
  3. With your selection made, click “Export” to export your artboard(s) to Justinmind.
  4. Choose a location within your folders to save your exported artboard(s). The file type will be “.vp” – a Justinmind file.export artboards folder
  5. The following dialog will appear, letting you know that your artboard(s) are being exported:artboards being exported dialog
  6. Finally, the following dialog will appear when your artboard(s) have been exported successfully:artboards exported successfully
  7. Locate your .vp file and double click it to open it in Justinmind.

Export artboards as images

If you want to export artboards as images, click the “Export artboards as images”:export artboards images
Then, follow the process above.

How to work with Sketch artboards in Justinmind

Once you’ve exported your artboards, you can modify them in Justinmind. To open your exported artboards in Justinmind:

  1. Open Justinmind. From the dialog that appears, select the “Open a prototype” option. In the next dialog, choose your Justinmind .vp file that contains your exported Sketch artboard(s).
  2. With your file selected, click “Open”. Your Justinmind prototype will open in the Canvas.
  3. With your prototype open, you can start customizing it. Note that if you have exported your artboards as layers, you will be able to edit individual elements and add interaction to them.

    However, if you have exported your artboards as images, you will only be able to add interaction to each screen, not individual elements.

Customizing your prototype (artboards exported as layers)

Editing text

To edit text within your prototype, select a Text element on the Canvas. You can either edit the text by double clicking on the Text element, or by going to the Properties palette and changing its “Value”.editing text

Editing the style of an element

To edit the style (e.g. color, size, position) of an element on the Canvas, simply select it on the Canvas and go to the Properties palette.

For instance, to change the color of an element, go to the “Background” section of the Properties palette and either select a color from the color picker or enter the HEX color code.editing style elements

Adding interaction to an element

To add interaction to an element, you’ll need to use Justinmind’s events.

  1. Select the element on the Canvas and go to the Events palette. Click the “Add Event” button.
  2. In the dialog that appears, select an event trigger and an action, select the target element, add a transition effect below (optional) and click “OK”.

Learn more about working with events and interactions here.

Customizing your prototype (artboards exported as images)

If you have exported your artboards as images, you cannot edit the visual design of your prototype’s screen because each screen is made up of a single image.

You can, however, add interaction(s) to a screen using the Hotspot widget.

Adding interaction to your prototype’s screen

To add interaction to a screen made up of a single image:

  1. Drag a Hotspot widget (from the Navigation section of the Basic widget library in the Widget library palette) and place it over the section of the screen you want to make interactive.
  2. Then, select the Hotspot on the Canvas and go to the Events palette. Click the “Add Event” button. In the dialog that appears, select an event trigger and an action, select the target element, add a transition effect below (optional) and click “OK”.

    Note that you can add multiple Hotspots to one screen, so that different sections of the screen perform different interactions.