Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Integration with Sketch

Discover Justinmind’s Sketch integration

Justinmind is integrated with vector graphics editor and design tool Sketch. Create fully-functional, interactive prototypes from your Sketch artboards and customize them to suit your needs.

1-justinmind-integration-sketch-canvas-text

This is a handy way to avoid rework in the design process and transition smoothly from one design tool to another. Make use of all of Justinmind’s drag and drop UI elements, as well as the interactive events to enhance your Sketch artboards, images, shapes and text. Remember that many of Justinmind’s UI widgets have been built with atomic design principles, which means you can break them down and customize them as you wish.

Here’s an example of how you can customize your artboards with Justinmind’s atomically designed UI elements:

integration-sketch-atomic-design

Get the Justinmind plugin for Sketch now and follow the steps below to get designing.

Setting up your Justinmind plugin for Sketch

Once downloaded, unzip and double-click the .sketchplugin file to install. Note that you will need a working Sketch account to make use of this integration.

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:

integration-sketch-layers

Exporting your artboards from Sketch to Justinmind

1—Export as artboards (as separate layers) to work on your visual design in Justinmind.

2—Export artboards as images (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.

3—Export individual artboards and work on only the ones you need to.

Note that you can optimize exports for high quality retina screens with both options. To do so, tick the ‘export images to 2x’ option in either instance.

2-integration-sketch-export-retina

You can choose how you wish to view your Sketch design in Justinmind: as a web, mobile or tablet prototype, and between portrait and landscape.

2-integration-sketch-export-iphone

Customizing your Sketch designs in Justinmind

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

Customize the design and styles of images, shapes (shapes are SVG vectors and will be exported to Justinmind as such) and text layers individually with Justinmind’s visual design and UI elements. You can change the color and size (scaling) of the widgets that have been created with SVG vectors too.

integration-sketch-change-color-svg

Then, add functionality to your artboards with Justinmind’s Events system. You can add effects and animations, transition effects, and mobile gestures if you’re designing for smaller screens.

You can even organize your Justinmind workspace to match that of Sketch. Create folders that replicate the Sketch pages to organize your designs as you like. Justinmind’s UI elements have even been matched to those of Sketch so it’s easy to find your way around the user interface.

Important: note that it is not possible to re-import prototypes back into Sketch.

Learn more about Sketch with their tutorials!

And it’s as simple as that! If you haven’t already, download the plugin here and become a Sketch and Justinmind expert in no time! Please note that the integration works with Sketch v41+ only.

Next tutorial > Importing Sketch UI elements as SVG vector files into Justinmind