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.
To start using the Justinmind plugin for Sketch:
- Download the plugin.
- 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.
- 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 Justinmind
Export artboards layers
If you want to export artboards as layers:
- Click the “Export artboards layers” option:
- The following dialog will appear:
- Select an individual artboard to export
- Check “Export all” to export all artboards
- Choose a prototype device to export your artboards to. Portrait and landscape options are also available for mobile and tablet devices.
- Check to export text layers as images
- Check to optimize exports for high quality retina screens
- With your selection made, click “Export” to export your artboard(s) to Justinmind.
- Choose a location within your folders to save your exported artboard(s). The file type will be “.vp” – a Justinmind file.
- The following dialog will appear, letting you know that your artboard(s) are being exported:
- Finally, the following dialog will appear when your artboard(s) have been exported successfully:
- 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”:
Then, follow the process above.
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:
- Select the element you’d like to be generated as an Input Text Field.
- Edit the name of the element, typing “in_” at the beginning of the name.
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.
Once you’ve exported your artboards, you can modify them in Justinmind. To open your exported artboards in Justinmind:
- 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).
- With your file selected, click “Open”. Your Justinmind prototype will open in the Canvas.
- 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)
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 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.
Adding interactions to an element
To add interaction to an element, you’ll need to use Justinmind’s events.
- Select the element 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”.
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:
- 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.
- 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.