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.

Download the Justinmind plugin for Sketch here
and follow the steps below to get started.

Setting up your Justinmind plugin for Sketch

To start using the Justinmind plugin for Sketch:

  1. Download the plugin.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 plugin 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 Sketch assets appear in Justinmind

The generated .vp file will convert all layers from your Sketch 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.

Creating Input Fields

You can easily turn assets from your Sketch file into interactive Input Text Fields in Justinmind. To do so:
iPhone input field keyboard

  1. Select the element you’d like to be generated as an Input Text Field.
  2. Edit the name of the element, typing “in_” at the beginning of the name.Add li_ prefix to rectangle

Once generated in Justinmind, Rectangles in Sketch with an “in_” prefix will turn into Input Text Field elements in Justinmind. All other elements will stay as shapes or images and will have a transparent Input Text Field placed over them, allowing for Input during simulation.
Symbols in Sketch with an “in_” prefix will change all instances of the Symbol on different Artboards to Input Text Fields in Justinmind.
Input Text Field added in Justinmind

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 interactions 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.