Design hand-off for developers

Justinmind’s developer-friendly interface helps designers and developers collaborate throughout projects.

The design team, who creates prototypes, can provide visual handoffs to the development team by giving them access to Justinmind.

The development team can then use Justinmind’s developer-friendly, read-only interface to get all the information they need to bring the designs to life.

Creating a developer

1. Login to your online account and go to the Collaborators tab. Then, go to the Developers sub-tab.
2. Select the “Create a new developer” button. Add the email, first and last names of the person you wish to add as a developer, and click “Create developer”.
   
   Repeat this step for each new developer you wish to create. Keep in mind you can create an unlimited number of Developers for free in any paid account.
Note: you can also create a developer by clicking the “Import reviewers from CSV” link to import developer information from a pre-defined list. Learn more about this here.

Sharing your prototype with developers

Once you’ve created developer profiles, you can give them access to your prototypes. You can invite Developers the same way you invite reviewers:

1. Click the ‘Share’ button near the top of the editor.
2. Place your prototype in an existing project or create a new one.
3. Tap ‘Share’ to upload your prototype to your online account. You’ll see a confirmation dialog when your prototype has been successfully published.
4. Click ‘View in my account’, which will launch a browser loaded to the prototype in your Justinmind online account.
5. Tap the ‘Invite reviewers’ button, which will open a pop-up where you can select developers from the list on the right and write any instructions or comments for them.
6. Click ‘Send invitations’ to invite developers. They’ll receive an email containing a link to the interactive prototype and tools to get the CSS, distances, sizes and many other things from your design.

The developer interface

The developer-friendly interface is a little different from the regular reviewer interface.

On top of the regular reviewer features like adding comments, simulating the prototyping and having access to the requirements of the prototype; developers have an additional option in the tool bar to inspect the design. As you can see in the video above, that option let’s the developer to get all the information about positions, sizes, css and graphical assets of the design with the comfort of their own browsers.

Bulk importing developers from a .csv file

If you would like to add multiple developers to your account, you can import them from a .csv file to save time.

Before you get started

To add developers to your account, you’ll need:

• The names and email addresses of the developers who you want to add to your account
• A blank sheet in a spreadsheet program, such as Microsoft Excel or Google Sheets, saved as a comma separated value (.CSV) file

Importing user details from a .csv file

To prepare your file for importing, follow these steps:

1. Open your blank worksheet in your spreadsheet program. The first row should read be as follows “Email”, “Name” and “Last name” if desired, though not obligatory.
2. Add your contacts’ details into the relevant fields in the spreadsheet.
   
   Save/download the file in .csv format.
3. Go to the Developers sub-tab and click the “Import developers from CSV” link
   
   Click the “Select file” button, choose your .csv file containing the user contact details and click the “Import developers” button.
4. Your new developers should appear in the tab.

Exporting assets in bulk

On top of the online inspect tool there is a way to send your developers all the information about CSS, graphical assets and HTML for all your prototype in two ways:

Documents

From the “File” main menu option, select “Export” then “Spec. Document”. That option will generate a MS Word document with all the information, screenshots and event descriptions of the contents of your prototype. You can also customize your document by clicking “Customized Document”.
In the dialog that appears, choose where to save the document, give the file a name and customize the export configuration options, including adding personalized logotypes and adding descriptions.

HTML, CSS, and Javascript

From the “File” main menu option, select “Export” then “to HTML”. This will create a folder with a local simulated version of the prototype as well as prototype assets, including everything you see on the Canvas, and any Events that are included in the prototype.
You can find the generated HTML, CSS, and Javascript from your prototype by opening the folder, then going to Resources > Screens.