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.

Adding and managing developers

Developers can use Justinmind’s prototyping tool, in read-only mode. They are able to view the prototype and access the CSS styles, assets and documentation.

Creating a developer

1. Go to the Collaborators tab in your online account and 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”.
3. Repeat this step for each new developer you wish to create.
4. The developer(s) will then receive an activation email. The email contains a link to activate their developer profile (by inputting their username and email address, and creating a password).
   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.

To create a group of developers

1. Go to the Developers Groups sub-tab.
2. Click “New group” and give your group a name.
   
   Click “Create group” to apply changes.
3. Back in the Developer Groups sub-tab, your new group should appear.

Sharing your prototype with developers

Once you’ve created developer profiles, you can give them access to your prototype. There are two ways to do this:

• Send the Justinmind .vp file directly to developers via email
• Publish your prototype to your online account with our Teamwork features. Then, share it with the developer. Note that for developers to modify the prototype directly, they will need to be paying users.

Making a developer a prototyping user

If you want to enable your developers to edit your prototypes, you’ll need to make them users. To do so:

1. Go back to the Developers sub-tab of the Collaborators tab.
   
   Go to the card of the developer you want to make a user and select the “Make this developer a user” option from the Actions drop-down.
2. A dialog will appear, confirming you want to make this developer a user. Click “Yes” to apply changes.
3. You will be taken to the User Management sub-tab of the Users tab. The reviewer converted to a user should appear in this list. You’ll see that the number of Current Users under your Account Status on the right-hand side will increase. Note that only the Account Owner can make this change.

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.

How to view a .vp file

Developers can access prototypes in two ways:

• As collaborators who can review prototypes in the Simulation window. Account managers can add and manage developers as collaborators – more information can be found here
• Using the developer-friendly interface. Account owners can give developers access to their prototypes in the developer-friendly interface by sending them the .vp prototype file via email or by adding them as a prototyping user using the Teamwork feature

To create a .vp file of your prototype in Justinmind:

1. Go to File in the main menu of the Justinmind editor.
2. From the dropdown, select “Save As”.
3. A dialog will appear prompting you to choose a location to save your .vp file.
4. Choose a location and select “Save”.
5. You can find your prototype in the location chosen in step four.

The developer interface

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

This is a read-only workspace, meaning developers can’t modify prototypes. They will however have all the tools and information they need from the design team to get started on coding.

1. Screens – you’ll find a list of the prototype’s screens in the Screens palette. You can switch between them by clicking on their names. The screen you click on will appear in the Canvas.
2. Templates – you’ll find a list of the prototype’s templates in the Templates palette. Templates define the structure and style of UI elements within a screen.
3. Masters – a list of the prototype’s masters can be found in the Masters palette.
   
   Masters are groups of UI elements that can be reused across screens and within templates in a prototype. Learn more about working with templates and masters here.
   
   Templates and Masters in the developer-friendly interface are useful for understanding the information architecture of a prototype.
4. Outline – the Outline palette lists all of the UI elements within the current screen. When you switch screens, the Outline will adapt and display the content found in the newly-selected screen.
5. Properties & CSS – the Properties palette is where developers can grab design specifications from.

Copying CSS styles

When you select a UI element from the canvas, you’ll find that element’s details and CSS properties in the Properties palette (name, template, width, size and distance from other UI elements, weight, HEX color codes, font family etc.).

With a UI element selected, you can copy text and CSS properties to the clipboard. To do so, click the “Copy CSS” link.

Comments and requirements in Simulation mode

Developers can simulate prototypes by clicking “Simulate” button, in the top right-hand corner of the user interface.

Once in the simulation, developers can view any comments by activating the comment toggle button. The hamburger menu allows developers to see all the screens in the prototype as well as any requirements.

Exporting assets

You can export a number of resources from the developer interface, including:

Graphics

Graphic elements can be exported in PNG or PNG@2X, optimized for Retina. To do so, click the “Export” link.

Documents

From the “File” main menu option, select “Export to Document”. Here you can export the documentation you need in .docx format. 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 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.